版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
简单正方体的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)
}
}
动画效果：
3.总结
由于图片展示出来的效果没有3d动画的那种效果，需要自己去试一下，由于没有录制视频的工具，只能这样了，一些更炫酷的动画博主没有做，希望各位可以做出更加炫酷的动画。