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%; （默认值） (尽量避免景深的叠加)

代码示例：
 <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
            width: 400px;
            height: 400px;
            border: 1px solid red;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -200px;
            perspective: 200px; /* 控制Z轴上的位置 */
            perspective-origin: 200px; /* 控制X轴上的位置 */
        }
        
        #inner {
            margin-top: 100px;
            margin-left: 100px;
            width: 200px;
            height: 200px;
            border: 1px solid;
            border-radius: 50%;
            background: pink;
            text-align: center;
            font: 50px/200px "微软雅黑";
            transition: 1s;
            /*  transform: perspective(300px) rotateX(0deg); */
        }
        
        #wrap:hover #inner {
            /*  transform: perspective(100px) rotateX(300deg); */
            transform: rotateX(360deg);
        }
    </style>
    
     <div id="wrap">
        <div id="inner">啦啦啦</div>
    </div>

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

代码示例：
 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #wrap {
            position: relative;
            margin: 200px auto;
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
        
        #test {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
            width: 100px;
            height: 100px;
            background: pink;
            text-align: center;
            font: 20px/100px "微软雅黑";
            border-radius: 50%;
            animation-name: move;
            animation-duration: 3s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-iteration-count: 3;
            animation-direction: reverse;
        }
        @keyframes move {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(300deg);
            }
        }
    </style>
    
     <div id="wrap">
        <div id="test">僵小鱼</div>
    </div>

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);
            }
        }