html5制作一个立方体,CSS3 3D transforms系列教程-立方体

学习制作3D翻转卡片是开始学习3D transform的一个好方法。一旦你掌握了3D翻转卡片的制作方法，是不是迫不及待的想制作更复杂的3D物体？我们在这个教程中将开始学习制作3D立方体。

3D立方体的HTML结构和3D卡片的HTML结构一样简单，它需要6个元素来制作立方体的6个面：

1

2

3

4

5

6

给立方体的六个面设置基本的定位方式和尺寸：

.container {

width: 200px;

height: 200px;

position: relative;

perspective: 1000px;

}

#cube {

width: 100%;

height: 100%;

position: absolute;

transform-style: preserve-3d;

}

#cube figure {

width: 196px;

height: 196px;

disp