css实现立方体转动动画

最近项目中一些可视化内容需要做一些动画，有一个立方体的转动效果，最开始想着是拿一个3D模型放上去，但是看了看别人的实现方式，发现自己想太多。

灵活运用css的transform属性，实现一个立方体是很容易的。

坐标轴的方向

因为要使用到3D到动画效果，所以必须先搞清楚坐标轴的方向。

我们以正对屏幕的角度来说：

• 水平向右的是X轴正方向
• 竖直向下的是Y轴正方向
• 从屏幕指向你的是Z轴正方向

然后说一些常用的transform属性：

translate

translateX是沿着X轴方向移动

translateY是沿着Y轴方向移动

translateZ同理

rotate

rotateX是绕X轴旋转

rotateY和rotateZ同理

transform-style: preserve-3d;

transform-style用来规定如何在3D空间内呈现被嵌套的元素，有两个值，flat 和 preserve-3d;

默认值是flat，默认情况下元素是层叠的，中心不能交汇。设置为preserve-3d之后元素的中心可以交汇，在此基础上做一些Z轴方向的变化等才能实现3D效果。

编码实现旋转的正方体

提前说一点，我们打算做一个边长为300px的正方体。所以下述代码中经常看到150px这个值，这个150px就是为了单个方向移动一半距离，比如说正面向前移动150px，背面向后移动150px，来实现300px的边长。后续不对这个数值再做解释。

html结构如下，box是外层盒子，里边是正方体的六个面

<div class="box">
    <div class="front"></div>
    <div class="back"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"></div>
    <div class="bottom"></div>
</div>

给最外层盒子添加样式，相对定位并且使用3D的效果描述元素

.box {
    position: relative;
    transform: translateZ(-150px);
    transform-style: preserve-3d;
}

然后对正方体的六个边设置基础的尺寸

.front,
.back,
.left,
.right,
.top,
.bottom {
    width: 300px;
    height: 300px;
    position: absolute;
}

现在我们开始拼接正方体的六个面，并给予不同的背景色用于区分

正面：

延Z轴正方向移动150px

.front {
    background-color: rgba(255, 0, 0, .5);
    transform: translateZ(150px);
}

背面：

与正面恰好相反，延Z轴负方向移动

.back {
    background-color: rgba(0, 255, 0, .5);
    transform: translateZ(-150px);
}

正反面都很好理解，其余上下左右四个面就需要自己想象一下他的样子，我们需要先移动然后旋转达到效果。

左面：

左边的面我们延X轴负方向移动150px后，其中心点与正反面的左边是对齐的。这时我们让左面延Y轴旋转90度即可。

.left {
    transform: translateX(-150px) rotateY(90deg);
    background-color: rgba(255, 0, 255, .5);
}

其他面同理，直接给出代码：

.right {
    transform: translateX(150px) rotateY(90deg);
    background-color: rgba(0, 255, 255, .5);
}
.top {
    transform: translateY(-150px) rotateX(90deg);
    background-color: rgba(0, 0, 255, .5);
}

.bottom {
    transform: translateY(150px) rotateX(90deg);
    background-color: rgba(255, 255, 0, .5);
}

这样我们的正方体就画好了，只要加一个旋转动画就能看到效果了。

简单的加一个动画

.box {
    position: relative;
    // transform: translateZ(-150px);
    transform-style: preserve-3d;
    animation: rotate 3s linear infinite; // 这个是新加的
}

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

这样正方体就可以转起来了。