使用 CSS3 创建旋转的 3D 立方体

Question

CSS3 创建 3D 立方体特效，这个效果的 CSS 已成为多年来最炫的技术，从简单的颜色和尺寸到深刻的语言指令，创意的视觉效果。 添加动画和你有真正漂亮的东西。不幸的是，每个立方体 CSS 教程我看有点长，一个混合的视觉风格与立方体的基本知识，所以我决定写一篇文章，只提供了基本的细节需要创建一个 CSS 3D 动画。

演示地址：http://run.wenjiangs.com/code/#/?code=ZEtSta23

<div>
    <div>
        <div>front</div>
        <div>back</div>
        <div>top</div>
        <div>bottom</div>
        <div>left</div>
        <div>right</div>
    </div>
</div>

立方体的每个面都有它自己的元素。 你可以想象，我们将 CSS 的每一面拿出来放在适当的位置。

让我们一次把这一有意义的点。 具有重要意义的第一要素是整个动画的包装，这将提供一个 CSS 的视角为 3D 元素：

.wrap {
    perspective: 800px;
    perspective-origin: 50% 100px;
}

CSS 视角的概念很难解释，但 MDN 做了伟大的工作，所以我会重复他们的解释。为了更好地理解的角度来看，我建议修改的角度看它如何影响性能演示。 接下来是集装箱将所有不同的立方体的面：

.cube {
    position: relative;
    width: 200px;
    transform-style: preserve-3d;
}

多维数据集将是 200 像素宽，相对定位、绝对定位面将保持在一定范围内。 我们也会使用 preserve-3d 保持元件的三维和不平坦的。 之前的任何特定面的规则，将有一些一般性的方式，将适用于每一面：

.cube div {
    position: absolute;
    width: 200px;
    height: 200px;
}

位置和尺寸的面，我们可以开始创建个人面临转型的代码：

.back {
    transform: translateZ(-100px) rotateY(180deg);
}
.right {
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
}
.left {
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
}
.top {
    transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top center;
}
.bottom {
    transform: rotateX(90deg) translateY(100px);
    transform-origin: bottom center;
}
.front {
    transform: translateZ(100px);
}

该 rotatey 值的旋转移动面对面显示文本在正确的角度，而 translatez 设置移动向前和向后的堆栈内的元素。 translatey 设置可能是混乱的，但请注意，这是提高或降低一脸显示 3D 效果通过透明玻璃。 每个面都有自己的翻译设置放在适当的地方，以便随时修改这些值，为什么每个对应于它的面。

水平旋转的立方体

当然没有什么好动画设置 3D 元素。 所以这里有几个步骤，我们需要使我们的宝贵的立方体动画水平：

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

.cube {
    animation: spin 5s infinite linear;
}

可能比你想象的要容易，文本看起来是正确的，因为面对旋转我们实现了最初，我用关键帧动画的情况下，我们希望在将来添加更多的特性。

垂直旋转的立方体

旋转的立方体垂直应简单需要改变动画的 Y 轴，不幸的是，窗格会显示为文本的落后在某些情况下，我们需要修改一些元件的旋转：

@keyframes spin-vertical {
    from { transform: rotateX(0); }
    to { transform: rotateX(-360deg); }
}

.cube-wrap.vertical .cube {
    margin: 0 auto; /* keeps the cube centered */

    transform-origin: 0 100px;
    animation: spin-vertical 5s infinite linear;
}

.cube-wrap.vertical .top {
    transform: rotateX(-270deg) translateY(-100px);
}

.cube-wrap.vertical .back {
    transform: translateZ(-100px) rotateX(180deg);
}

.cube-wrap.vertical .bottom {
    transform: rotateX(-90deg) translateY(100px);
}

平坦的立方体

删除多维数据集的三维看，只显示一次一块（没有其他的脸暗示），从包装中取出的视角和起源的设置：

.wrap {
    /* no more perspective */
    perspective: none;
    perspective-origin: 0 0;
}

现在只有一个面将显示在任何给定的时间。