前端day18

一 3d

   1 触发3d空间

         transform-style:preserve-3d;

   2 3d位移

         transform:translate3d(x,y,z)

         translate()

   3 3d旋转

         rotate();

         rotate3d（x,xy,z,度数）

         注：x y z 是一个矢量值。为0，不旋转；为1，旋转。

         eg:rotate3d(1,1,0,6odeg)=rotate(60deg) rotateY（60deg）

   4 3d的缩放

         transform:scaleZ();

                  scale3d{x,y,z}

   5 让背面不可见

         backface-visibility:hidden;

   6 景深

         近大远小，数值一般在900-1200px之间,给父元素添加。

         prespective:500px;

   7 景深的视角

          prespective-origin:;

              中间：center

              左上角：left top/right top

              像素：10px 20px

   

二 CSS3动画

   1 制作关键帧

     （1）  @keyframes 动画名称{

                         /*开始*/

                         from{

                                  left:0;

                         }

                         /*结束*/    

                         to{

                                  left:500px;

                          }  

                } 

      （2）  @keyframes 动画名称{

                            0%{

 

                           }/*中间可以加任意关键帧*/

                           25%{

 

                           }

                          50%{

 

                           }

                           75%{

 

                           }

                          100%{

 

                          }

                 }

    2 调用关键帧

              1 属性：animation:

                 属性值：

                        动画的名称

                        动画的时间

                        延迟时间

                        动画的类型

                        动画循环的次数（无限循环：infinite）

                        动画运动的方向:

                                reserve alternate[先正后反]

                                alternate-reserve[先反后正]

                        运动的状态：

                                animation-plat-state:running paused;（暂停）

                        运动停止的状态：

                                 animation-fill-mode:forwards;(停在最后一帧)