CSS实现立方体

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;

}

此时,我们的立方体就可以旋转起来了,我们也就可以看到效果了.