3.19总结（3d转换）

1.位移

transform:translateX

transform:translateY

transform:translateZ:物体到屏幕的距离，尽量大于0，否则容易出现兼容问题。并且不能大于透视的距离，否则会消失，大概类似物体去到了后脑勺后面就看不到了。

2.旋转

transform:rotateX

左手法则：左手握拳，先让大拇指指向该轴的正值方向(朝右)；四指弯曲的方向 是物体运动的正角度。

transform:rotateY

左手法则：左手握拳，先让大拇指指向该轴的正值方向(朝下)；四指弯曲的方向 是物体运动的正角度。

transform:rotateZ

左手法则：左手握拳，先让大拇指指向该轴的正值方向(朝脸)；四指弯曲的方向 是物体运动的正角度。

transform:rotate3d （合写）一般情况下，会把位移写在前面，因为旋转会影响轴的方向。

 transform: rotate3d(1,1,0,20deg);

3.透视

perspective:500px;

1.写给被观察元素的父元素 单位：px

4.开启3d空间

transform-style:preserve-3d;

给直接的父元素设置(受影响的是子元素)

5.斜切 skew

transform: skewX(35deg);   沿着X方向斜切
transform: skewY(35deg);     沿着Y方向斜切
transform: skew(45deg, 60deg);  沿着 X 和 Y  都斜切

6.设置3D元素的观察视角

perspective-origin

值可以跟px,%,方位名词

案例：

/* 将 透视调节小以后，就可以跟放电影的效果一样了 */
        
        .wutai {
            width: 600px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 50px auto;
            perspective: 1000px;
            perspective-origin: 45%px 40%;
        }
        
        .rongqi {
            position: relative;
            width: 200px;
            height: 300px;
            border: 1px solid red;
            margin: 50px auto;
            transform-style: preserve-3d;
            animation: bianhuan 6s linear infinite;
        }
        
        .rongqi:hover {
            animation-play-state: paused;
        }
        
        .rongqi img {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 300px;
        }
        
        .rongqi img:nth-child(1) {
            transform: rotateY(40deg) translateZ(300px);
        }
        
        .rongqi img:nth-child(2) {
            transform: rotateY(80deg) translateZ(300px);
        }
        
        .rongqi img:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }
        
        .rongqi img:nth-child(4) {
            transform: rotateY(160deg) translateZ(300px);
        }
        
        .rongqi img:nth-child(5) {
            transform: rotateY(200deg) translateZ(300px);
        }
        
        .rongqi img:nth-child(6) {
            transform: rotateY(240deg) translateZ(300px);
        }
        
        .rongqi img:nth-child(7) {
            transform: rotateY(280deg) translateZ(300px);
        }
        
        .rongqi img:nth-child(8) {
            transform: rotateY(320deg) translateZ(300px);
        }
        
        .rongqi img:nth-child(9) {
            transform: rotateY(360deg) translateZ(300px);
        }
        
        @keyframes bianhuan {
            0% {
                transform: rotateX(-20deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(-20deg) rotateY(360deg);
            }
        }


  <div class="wutai">
        <div class="rongqi">
            <img src="./images/girl1.jpg">
            <img src="./images/girl2.jpg">
            <img src="./images/girl3.jpg">
            <img src="./images/girl4.jpg">
            <img src="./images/girl5.jpg">
            <img src="./images/girl6.jpg">
            <img src="./images/girl7.jpg">
            <img src="./images/girl8.jpg">
            <img src="./images/girl9.jpg">
        </div>
    </div>

7.浏览器的类前缀

div {
     /* 渐进增强  先满足低版本的浏览器  最后 满足高版本 浏览器 */
    -moz-transition: all 1s;  火狐
     -ms-tansition: all 1s;  IE
     -webkit-tansition: all 1s;  苹果  谷歌
     -o-tansition: all 1s;  欧朋
     transition: all 1s 
       
     /* 优雅降级    先满足高版本的浏览器 最后 满足低版本 浏览器*/
     transition: all 1s;
     -moz-transition: all 1s;
     -ms-tansition: all 1s;
     -webkit-tansition: all 1s;
     -o-tansition: all 1s;
   }