标签：动画 见解 css3D keyframes transform animation 关于 属性 3D

  经过一段时间的学习，我们已经初步掌握了2D的一些属性。css3D是我们这一周的最为重要的知识。首先我们要在父元素中形成一个3D的属性：transform-style:preserve-3d。这样我们就可以在这个父元素中做一些3D的操作了。即在这个空间中形成XYZ轴。

  3D的一些基本属性如下：

       3D功能函数：

        3D的位移：             transform:translate(x,y,z);                 translateX()                 translateY()                 translateZ()
        3D的旋转：             transform:rotate();                 rotateX()                 rotateY()                 rotateZ()  //默认情况效果类似                 rotate3D()
        3D缩放：             transform:scale3d(x,y,z);                 scaleX()                 scaleY()                 scaleZ()   在3D的场景中我们添加景深这个属性，在使用景深的时候有一个注意点,在使用translateZ的时候,景深加在一个和自己宽高一样的父容器上的效果和加在一个比自己大的父容器上的效果不一样,这是因为景深相当于我们始终在在父容器的中心点的位置去观看。这个自己去尝试就能明白了，我们可以看到近大远小。   之后我们就可以添加动画这个属性（animation）了，3D加上属性动画。我们可以完成许多好看的场景，但是由于我还是初学的阶段，只能完成一些简单的。例如3D球体如下 然后我们还需要了解一些关于动画的属性：  animation:  复合属性
        animation-name   关键帧的名称         animation-duration   动画的持续的时间         animation-timing-function   动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线）         animation-delay  动画的延迟         animation-iteration-count   动画运动的次数（默认情况下运动1次） infinite(无限循环)         animation-direction  运动的方向 动画是使元素从一种样式逐渐变化为另一种样式的效果。
　　css中通过 @keyframes 规则是创建动画，可以改变任意多的样式任意多的次数。
　　当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
　　指定至少这两个CSS3的动画属性绑定向一个选择器：
　　规定动画的名称
　　规定动画的时长
　　语法：@keyframes styleName {
　　　　keyframes-selector{css-style;}
　　　　}
　　keyframes-selector：可以用百分比来规定变化发生的时间
　　也可以用关键词 "from" 和 "to"
　　0% 是动画的开始，100% 是动画的完成.  

标签：动画,见解,css3D,keyframes,transform,animation,关于,属性,3D
来源： https://www.cnblogs.com/zhangkai1997/p/12384716.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。