3D动画效果

3D: 平移  旋转  缩放

       近景远深(盒子与视角的距离) 默认值为none

       perspective

       常用范围:900-1200   最佳观看距离

       perspective-origin: 3D观察的角度

       1.默认值:center center 在正中心观看(基本)

       2.左右,上下

       3.100% 100%

       定义元素以3D效果展示:transform-style

                flat  元素以2D平面效果展示(默认)

                preserve-3D  元素以3D效果展示

       给父元素设置:transform-style :preserve-3D  定义3D旋转舞台

       属性名:transform

        1.平移

           translateX:

           translateY:

           translate(X,Y):

           translateZ:   前后平移

           translate3D(X,Y,Z): 三个值都得写

       2.旋转

           rotateX   绕着X轴

           rotateY   绕着Y轴

           rotateZ=rotate  绕着自身

           rotate3D (x,y,z,deg) x,y,z取值范围0-1矢量  向量(某个方向旋转角度的比例)   绕着自定义的轴

       3.缩放  一般不用

           scalex

           scaley

           scalez         单独使用没有效果,需要搭配其他变化函数(旋转,还要触发近景远深)

           scale3D(x,y,z)

       立方体的写法:

       六个面

           一前一后

           一左一右

           一上一下

       球体

           圆形DIV两个轴旋转

           每个轴宣曼180deg

       帧动画:

       1:定义关键帧

           @keyfranmes  自定义动画名称{

            第一种写法:   from{ 起始状态

                   属性名:属性值;   相对于上下的属性名必须一样,属性值调整.

                   ......

}
                to{  结束状态
                    属性名:属性值
                    ......
                }
            }

            @keyfranmes  自定义动画名称{

             第二种语法  0%{

}
                10%{
                }
                ...
                100%{
                }
             }

       2.引用调用帧动画

           animation-name:自定义动画名称

       3.设置帧动画持续时间

           animation-duration:数值s+/ms

           其他参数

             a. animation-delay  帧动画的延迟时间

             b. animation-timing-function 帧动画运动方式

                linner  匀速

                ease  越来越慢

                ease-in:由慢到快

                ease-out:由快到慢

                eaes-in-out:由慢到快在到慢

                steps(n) 将动画分为n 部执行(一般是from to 写法) n从0 开始计数

                自定义运动方式:贝塞尔曲线

                贝塞尔曲线使用方法:

                    1.打开网站

                    2.调整所使用运动方式

                    3.复制所自定义的运动格式,粘贴并替换到复合属性中运动方式.

              c.animation-iteration-count: 帧动画执行次数

                 属性值   数值  infinite 无限循环

              d.animation-direction  帧动画运动方向

              normal:正常方向(默认)

              reverse:反方向运行

              alternate:动画先正常运行再反方向进行,并持续交替运行

              alternate-reverse:动画先反运行在正方向运行,并持续交替运行

              e.animation-play-state:检索帧动画运动状态

                 属性值:running (默认值)  paused 暂停

                 长搭配hover效果使用或者js使用.

               复合属性:animation:名称  持续时间 延迟时间 运动方式  执行次数  运动方向 ;