3D总结

2D变形

• top、height百分比参照与包含块的高度
• left、margin、padding、width百分比参照与包含块的宽度
• translate（-50%，-50%）百分比参照自身的宽高
• background-position百分比参照与(图片区域—图片的位图像素值)

3D变形

transform

transform: rotateY(360deg);  3D旋转
transform: rotate3d(1, 1, 1, 360deg); 3D旋转
transform: translateX(100px);   3D平移
transform: translate3d(-50%, -50%, -100px); 3D平移
transform: scale3d(-1, 2, 3);

景深

景深：让3D场景有近大远小的效果（我们肉眼距离屏幕的距离），是一个不可继承的属性，但他可以作用于后代元素（不是作用于本身的）

原理：景深越大、灭点越远、元素变形越小

景深基点：视角的位置，perspective-origin: 50% 50%; （默认值） (尽量避免景深的叠加)

代码示例：
 
    
     

        
啦啦啦
    

transform-style

transform-style：营造有层级的3d舞台，是一个不可继承属性，他作用于子元素

backface-visibility

backface-visibility:属性用来设置，是否显示元素的背面，默认是显示的

backface-visibility:keyword; keyword有两个值，hidden和visible，默认值是visible

3D动画

animation-name:move; 动画内的属性；属性指定应用的一系列动画，每个名称代表一个由@keyframs定义的动画序列

animation-duration：属性指定一个动画周期的时长。默认值为0S,表示无动画。

animation-timing-function：动画效果

• 默认动画效果是：由慢变快再变慢
• linear：线性过度，等同于贝塞尔曲线（0,0,1,1）
• ease:平滑过渡，等同于贝塞尔曲线（0.25,0.1,0.25,1.0）
• ease-in：由慢到块，等同于贝塞尔曲线（0.42,0,1,1）
• ease-out:由块到慢，等同于贝塞尔曲线（0,0,0.58,1）
• ease-in-out:由慢到快再到慢，等同于贝塞尔曲线（0.42,0,0.58,1）
• steps(n,[start|end]) ：传入一到两个参数，第一个参数意思是把动画分成n等分，然后动画就会平均地运行。 第二个参数start表示从动画的开头开始运行，相反，end就表示从动画的结尾开始运行。 默认值为end。

animation-delay ：定义动画开始前等待的时间，以秒或毫秒计（属于动画外的范畴）

animation-iteration-count ：只作用于动画内的属性 重复的是关键帧 ；定义了动画执行的次数（属于动画内的范畴）

animation-direction:定义了动画执行的方向 反转的是关键帧和animation-timing-function

代码示例：
 
    
     

        
僵小鱼
    

animation-fill-mode: 元素在动画外的状态 backwards：from之前的状态与from的状态保持一致 ;forwards:to之后的状态与to的状态保持一致 ;both:backwards+forwards

关键帧

 @keyframes move {
            0% {
                transform: translateY(-100px);
            }
            25% {
                transform: translateY(-50px);
            }
            50% {
                transform: translateY(0px);
            }
            75% {
                transform: translateY(50px);
            }
            100% {
                transform: translateY(100px);
            }
        }