前端提高篇（五十七）练习9：3d立方体旋转

6个面上标有数字1-6，数字和立方体各面的对应关系是：
前1 上2 后3 下4 左5 右6

.wrapper {
    
    
    perspective: 600px;
}
.box {
    
    
    transform-style: preserve-3d;
    height: 200px;
    width: 200px;
    position: relative;
    margin: 100px auto;
    animation: move 5s linear infinite;
}
.item {
    
    
    position: absolute;
    left: 0;
    top: 0;
    height: 200px;
    width: 200px;
    border: 1px solid black;
    color: #fff;
    line-height: 200px;
    text-align: center;
    opacity: 0.5;
}
.item:nth-child(1) {
    
    
    background: royalblue;
    transform: translateZ(100px);
}
.item:nth-child(2){
    
    
    background: salmon;
    transform: rotateX(90deg) translateZ(100px);
}
.item:nth-child(3) {
    
    
    background: slateblue;
    transform: rotateX(180deg) translateZ(100px);
}
.item:nth-child(4) {
    
    
    background: springgreen;
    transform: rotateX(-90deg) translateZ(100px);
}
.item:nth-child(5) {
    
    
    background: pink;
    transform: rotateY(-90deg) translateZ(100px);
}
.item:nth-child(6) {
    
    
    background: purple;
    transform: rotateY(90deg) translateZ(100px);
}
@keyframes move {
    
    
    0% {
    
    
        transform: rotate3d(1,1,1,0);
    }
    100% {
    
    
        transform: rotate3d(1,1,1,360deg);
    }
}

<div class="wrapper">
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</div>

效果：

在给6个面定位置时，要注意，是先旋转哪一个轴，再旋转哪一个轴
如数字’2’所在的面，是上面，要先旋转X轴90deg，再沿Z轴正方向平移100px

如果先沿z轴平移，再沿x轴旋转
图片会先向屏幕这边移动，然后在沿X轴翻，这样最后图片的位置在原xoz面上
（坐标轴原点设为o点，图片最终状态是：躺平在原坐标轴系统的xoz面上，类似一个小人，往屏幕跑了100px，然后就地躺），
这样的位置是不满足原先设定的立方体面与数字的对应的，且高度直接缩小了一半

然后就是之前没有讲的transform: rotate3d(x,y,z,ndeg);，指的是沿xyz合力方向旋转ndeg
案例中xyz均设为1，合成的矢量方向大概是：