2020-12-16_3D旋转与位移

---

一、3D旋转

• transform: rotate3D(x,y,z,deg);
  x,y,z 是一个0/1的数值，0表示不旋转，1表示旋转，deg表示旋转的角度。
  rorateX，X轴旋转
  rorateY，Y轴旋转
  rorateZ，Z轴旋转
  旋转的方向：左手法则
  左手握住旋转轴，大拇指指向坐标的正方向，其他手指的卷曲方向就是旋转的正方向。

.box:hover {
            /* transform: rotateX(180deg); */
            /* transform: rotateY(180deg); */
            transform: rotate3D(1, 1, 1, 180deg);
        }

二、3D位移

• 位移：
  transform: translateX(); //沿着x轴移动
  transform: translateY();//沿着Y轴移动
  transform: translateZ();//沿着Z轴移动
  transform: translate3d(x,y,z);

.box:hover {
            /* transform: translateX(100px); 往右*/
            /* transform: translateY(100px);往下 */
            transform: translateZ(100px);
            /* 右下 */
            /* transform: translate3d(100px, 100px, 0px); */
        }

三、透视

• perspective 透视：
  translateZ为正值，perspective值越小，盒子与你的距离越近，看到的效果也就越大。
  translateZ为0，perspective不管怎么变化，盒子上的阴影不变，看到的效果不变。
  translateZ为负值，perspective值越小，盒子与你的距离越近，看到的效果也就越小。

• 设置给变换盒子的父容器。
  透视：
  设置用户眼睛与屏幕的距离。
  透视效果只是视觉上的呈现，不是真正的距离。

  body {
        perspective: 200px;
    }

四、翻面隐藏

百度钱包案例

backface-visibility: hidden;

五、3D呈现

• 3D呈现
  某个图形是由多个元素组成的。可以给这些元素的父元素添加一个transform-style：persevere-3d 来使其变成一个真正的3d图形。

1.立方体相册

       .box {
            margin: 0 auto;
            margin-top: 200px;
            position: relative;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transition: transform 10s;
            transform: rotateX(13deg) rotateY(0deg);
        }
        .hulu {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            opacity: 0.8;
        }
        .box:hover {
            transform: rotateX(13deg) rotateY(360deg);
        }
        .hulu:nth-child(1) {
            background: url("img/hl1.jpg");
            transform: translateZ(100px);
        }  
        .hulu:nth-child(2) {
            transform: translateZ(-100px) rotateY(180deg);
            background: url("img/hl2.jpg");
        }
        .hulu:nth-child(3) {
            transform: translateX(100px) rotateY(90deg);
            background: url("img/hl3.jpg");
        } 
        .hulu:nth-child(4) {
            transform: translateX(-100px) rotateY(-90deg);
            background: url("img/hl4.jpg");
        }
        .hulu:nth-child(5) {
            transform: translateY(100px) rotateX(-90deg);
            background: url("img/hl5.jpg");
        }
        .hulu:nth-child(6) {
            transform: translateY(-100px) rotateX(90deg);
            background: url("img/hl6.jpg");
        }

2.走马灯

.item:nth-child(1) {
                background-image: url(img/hulu1.jpg);
                transform: translateZ(-600px);
            }
            
            .item:nth-child(2) {
                background-image: url(img/hulu2.jpg);
                transform: translateZ(600px);
            }
            
            .item:nth-child(3) {
                background-image: url(img/hulu3.jpg);
                transform: rotateY(-60deg) translateZ(-600px);
            }
            
            .item:nth-child(4) {
                background-image: url(img/hulu4.jpg);
                transform: rotateY(60deg) translateZ(600px);
            }
            
            .item:nth-child(5) {
                background-image: url(img/hulu5.jpg);
                transform: rotateY(60deg) translateZ(-600px);
            }
            
            .item:nth-child(6) {
                background-image: url(img/hulu7.jpg);
                transform: rotateY(-60deg) translateZ(600px);
            }
            
            .box:hover {
                transform: rotateX(-10deg) rotateY(360deg);
            }