详解用CSS绘制3D旋转立方体

CSS3D旋转立方体绝对是能充分代表这些年CSS发展新高度的典型案例。从一种只是简单的颜色和尺寸渲染的标记符，CSS现在已经变成了一种能够创造出复杂的、具有艺术感染力的视觉效果的编程语言。动画效果的生成变得非常的简单易行。

遗憾的是，目前网上的关于CSS立方体的制作教程都有些复杂，在立方体的基础上混合了其它视觉效果，所以，我决定写这篇文章，只涉及如何创造出基本的CSS立方体的讲解。这篇文章中使用的例子来自于CodePen上Mircea Georgescu的漂亮杰作。

观看演示

HTML

这个立方体首先是包裹在一个div里：

<div>
<div>
<div>前</div>
<div>后</div>
<div>上</div>
<div>下</div>
<div>左</div>
<div>右</div>
</div>
</div>

而立方体的每个面都用一个div元素表示。你可以想象出，我们将使用CSS将它们定位到正确的空间位置上。

CSS

我们一步一步的进行讲解。首先要注意的是包裹这个立方体的div元素，为了让它有立体效果，给它设置了CSS透视属性。

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

CSS透视是一个非常新颖的概念，MDN已经对其讲解的非常透彻，我就不再复述了。为了更好的理解透视，我建议你修改这个例子里的perspective属性，看看它是如何影响表现效果的。下面要说的是立方体div容器，立方体的所有面都放在里面：

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

立方体边长是200px，使用relative定位方式，这样它的那些使用绝对定位的各个面都被限制在它里面。我们使用preserve-3d属性值来让它表现出3D特征，而不是平面效果。在我们给各个特定面制定CSS规则前，先制定一个所有面都共用的CSS规则：

.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属性可能让人有些困惑，它的作用是让立方体的各个面移动到相应的位置从而拼凑出一个立方盒子。每个面都有各自的移动方向和距离，你可以修改这些值来看看它们是如何从叠摞平躺移动到相应位置变成一个立方体的各个面的。

观看演示

水平转动立方体

当然，这个静止不动的立方体显然不够吸引人，缺少一点生气，我们要让它动起来。下面的步骤就是让我这个宝贵的立方盒子旋转起来：

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

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

你也许意外竟然会如此简单，不是吗？因为我们只需要让这个立方体容器div旋转，它就能带动起内部的各个面一起旋转。下面我们要让它垂直翻转和2D水平翻转。

垂直旋转立方体

让立方体垂直旋转只需要修改一下，让它沿着Y轴旋转就行了，不是吗？很不幸，不是这样的。因为这个立方体静止时是斜着对我们的，我们需要把它调整到直对着我们时才能旋转，所以要修改一下它的初始旋转角度：

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

.cube-wrap.vertical .cube {
margin: 0 auto; /* 居中 */

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);
}

… 这就修改完了。

2D水平旋转

去掉立方体的3D视觉效果，让我们以水平角度观看这个立方体(没有上下两面的视觉辅助)，只需要去掉最外层的div上的透视属性和透视原点值：

.wrap {
/* 去掉透视效果 */
perspective: none;
perspective-origin: 0 0;
}

现在我们就只能看到它的水平面了。

观看演示

CSS3D旋转立方体已经在网络上流行有一阵子了，但我希望这篇文章能让你更容易的学会制作它，给自己一个惊喜。如果在尝试自己制作是遇到困难，不要气馁——我也是费力很大牛劲才做出来的！我期望看到你做出的效果！

转自 http://www.seejs.com/archives/352