简单正方体的3d旋转

1.首先搭建正方体模型

代码如下：

body {
        /* 透视：没有透视不能看到3d效果 */
        perspective: 1200px;
    }
    .content{
        display: inline-block;
        position: relative;
        width: 200px;
        height: 200px;
        top: 200px;
        left: 300px;
        animation: rotate1 3s linear infinite;
        transform-style: preserve-3d;

    }
    .box {
        width: 200px;
        height: 200px;
        position: absolute;
        opacity: 0.5;
    }

    .red {
        /* 前 */
        background-color: red;
        transform: translate3d(0px, 0px, 100px);
    }

    .yellow {
        /* 上 */
        background-color: yellow;
        transform: rotateX(90deg) translate3d(0px, 0px, 100px);
    }

    .blue {
        /* 左 */
        background-color: blue;
        transform: rotateY(-90deg) translate3d(0px, 0px, 100px);
    }

    .pink {
        /* 下 */
        background-color: pink;
        transform: rotateX(-90deg) translate3d(0px, 0px, 100px)
    }

    .green {
        /* 右 */
        background-color: green;
        transform: rotateY(90deg) translate3d(0px, 0px, 100px);
    }

    .orange {
        /* 后 */
        background-color: orange;
        transform: translate3d(0px, 0px, -100px);
    }
}

<body>
    <div class="content ">
        <div class="box red">1</div>
        <div class="box yellow">2</div>
        <div class="box blue">3</div>
        <div class="box pink">4</div>
        <div class="box green">5</div>
        <div class="box orange">6</div>
    </div>
</body>

效果图片如下：效果是这样，但是如果想看到其他位置，可以通过调perspective值的大小，就可以看到其他位置的颜色，或者自己一个一个搭建正方形，这样就知道哪个面对应的颜色。
在这里插入图片描述

2.使得搭建正方体模型转动

代码如下：将下面的代码复制到style中，也可以自己写。

@keyframes rotate1 {
        from{/* 这是初始的动画图，也就是上图刚开始动画之前的效果*/
        	/*这里可以写成例1.transform: rotateX(0)
        	2.transform: rotateX(0) rotateY(0)
        	这里可以任选两个轴进行旋转，这里就不再一一举例了
			*/
            transform: rotateX(0) rotateY(0) rotateZ(0)
        }
        to {
        	/*这里可以写成例1.transform: rotateX(360deg)
        	2.transform: rotateX(360deg) rotateY(360deg)
        	这里可以任选两个轴进行旋转，这里就不再一一举例了
			*/
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
        }
}

动画效果：在这里插入图片描述
上面是围绕三个轴在转动，所以我就将其中围绕一个轴转动和两个轴转动的例子在例举出来，这样就更加方便理解动画围绕哪个坐标轴转动了。

围绕一个轴进行转动，例如x轴、y轴、z轴，代码如下：
x轴代码：

/* rotate是动画名，不要忘记启动动画时名字的修改*/
@keyframes rotate {
        from{
            transform: rotateX(0) 
        }
        to {
            transform: rotateX(360deg)
        }
    }

动画效果如下图：
在这里插入图片描述
y轴代码：

/* rotate是动画名，不要忘记启动动画时名字的修改*/
@keyframes rotate {
        from{
            transform: rotateY(0) 
        }
        to {
            transform: rotateY(360deg)
        }
    }

效果如下：
在这里插入图片描述
z轴代码：

/* rotate是动画名，不要忘记启动动画时名字的修改*/
@keyframes rotate {
        from{
            transform: rotateZ(0) 
        }
        to {
            transform: rotateZ(360deg)
        }
    }

效果如下：
在这里插入图片描述
围绕x，y两个轴转动，就以x轴和y轴举例，代码如下：

@keyframes rotate {
        from{
            transform: rotateX(0) rotateY(0)
        }
        to {
            transform: rotateX(360deg) rotateY(360deg) 
        }
    }

动画就不截了，自己可以通过代码看一下动画。
由于之前没有装录频工具，现在给大家补一下gif动画，更方便大家理解。gif如下图：在这里插入图片描述

3.总结

以上就是一个正方体的简单的动画，以及正方体的搭建，希望给予各位大佬帮助。一些更炫酷的动画博主没有做，希望各位可以做出更加炫酷的动画。

原文链接：https://blog.csdn.net/weixin_44595744/article/details/102728576