关于css3D的一些见解

  经过一段时间的学习，我们已经初步掌握了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