Css制作立方体
这周在逆战班学习了过渡(transition)，2D动画(transform)，渐变(gradient)，以及3D动画特效。让我能够敲出很多很炫很好看的动画特效。今天想讲一下如何制作一个立方体。
首先，一个立方体需要六个面，所以我们可以用6个div放在一个大的div里，也可以用ul,li列表来制作。
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div>
接下来需要添加静态样式。
.wrap {
width: 500px;
height: 500px;
margin: 50px auto;
border: 1px solid pink;
position: relative;
/* 让wrap盒子变成一个3d空间 */
transform-style: preserve-3d;
}
/* 给所有的子div设置同样的宽高200像素 让它们都绝对定位 并且在父元素中居中显示 */
.wrap div {
width: 200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
/* 给每个div设置各自的颜色 并让第一个div沿着Z轴向前移动100像素,作为立方体的前面*/
.box1 {
background: red;
transform:translateZ(100px);
}
/* 让第二个div先沿Y轴顺时针旋转90°(此时坐标轴也跟着旋转了90°),再沿着旋转后的Z轴向右移动100像素,作为立方体的右面 */
.box2 {
background: orange;
transform: rotateY(90deg) translateZ(100px);
}
/* 让第三个div先沿X轴逆时针旋转90°,再沿着旋转后的Z轴向下移动100像素,作为立方体的下面 */
.box3 {
background: yellow;
transform:rotateX(-90deg) translateZ(100px);
}
/* 让第四个div沿着Z轴向后移动100像素,作为立方体的后面,与第一个div相对 */
.box4 {
background: green;
transform:translateZ(-100px);
}
/* 让第五个div先沿Y轴逆时针旋转90°,再沿着旋转后的Z轴向左移动100像素,作为立方体的左面,与第二个div相对 */
.box5 {
background: blue;
transform:rotateY(-90deg) translateZ(100px);
}
/* 让第六个div先沿X轴顺时针旋转90°,再沿着旋转后的Z轴向上移动100像素,作为立方体的上面,与第三个div相对 */
.box6 {
background: purple;
transform:rotateX(90deg) translateZ(100px);
}
这样一个立方体我们就已经布置完成了,但是这样并不能看到效果,所以我们再给.wrap这个div添加旋转动画,来方便我们观察.
设置动画
@keyframes play {
0%{transform: rotateX(0) rotateY(0) rotateZ(0);}
100%{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
把动画添加给.wrap的div
.wrap {
animate: play 5s linear infinite;
}
此时,我们的立方体就可以旋转起来了,我们也就可以看到效果了.
来源：CSDN
作者：Louis灬X
链接：https://blog.csdn.net/weixin_44117089/article/details/104716236