html 动画

css变形

        属性：transform

       函数

        平移：translate (xpos,ypos),translatex(),translatey()

        缩放：sacle()

        倾斜：skew()

        旋转：rotate(): 默认z轴旋转，中心点在元素中心

        设置中心原点：transform-origin: ;  

 /* transition-property:过渡或动态模拟的CSS属性

           transition-duration:完成过渡所需要的时间

           transition-timing-function:指定过渡函数

           transition-delay:过渡开始出现的延迟时间

           ● ease：速度由快到慢（默认值）

           ● linear：速度恒速（匀速运动）

           ● ease-in：速度越来越快（渐显效果）

           ● ease-out：速度越来越慢（渐隐效果）

           ● ease-in-out：速度先加速再减速（渐显渐隐效果）

*/

       .box{

         width: 200px;

         height: 200px;

         background-color: aqua;

         transition: all 2s linear;

       }    

       .box:hover{

        width: 300px;

        height: 300px;

        transition: all 2s linear;

       }

perspective:

          -设置景深3D呈现效果

         旋转  

         三维空间中x，y，z 三点确定一个位置

         以原点到设置这个点的射线进行旋转