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;

}

在这里插入图片描述
此时,我们的立方体就可以旋转起来了,我们也就可以看到效果了.

来源：CSDN

作者：Louis灬X

链接：https://blog.csdn.net/weixin_44117089/article/details/104716236

标签

立方体

transform

css

css动画