CSS3 3D正方体

提到36D我们会想到什么东西呢，嘿嘿嘿，老司机们，不好意思说错了，应该是3D效果，下来让我带领你们写出一个3D正方体。
先来认识下3D空间中的坐标系

再来认识下3D中的旋转，分别是绕X轴，Y轴，Z轴

单杠男x轴方向的旋转

---

钢管妹纸是y轴方向的旋转

---

转盘旋转是z轴的旋转

我们先来学习三个重要的属性
1.perspective属性，属性值是某px，英文是透视，视角的意思，使用这个属性的作用在于你看一个事物的距离发生变化，取值越小，3D效果就越明显，我们称它为舞台元素
2.transform-style属性，flat是默认值，表示所有子元素在2D平面呈现；preserve-3d表示所有子元素在3D空间中呈现，所以3d效果中我们需设置preserve-3d。
3.transform-origin属性，用来设置旋转中心，它的设置方式有多种形式，默认是center，下面我们通过实例来看一下旋转中心的设置以及不同。粉色的是旋转45度后的，红边框是原来的位置。

• 我们不设置旋转中心，默认是几何中心，等价于transform-origin:center center;
  
  图片中的黑点处是旋转中心
• transform-origin:left center;
  
  旋转中心在黑色处。
  其余的可以自己去尝试设置，然后观察效果，比如left，top左上角，right，bottom右下角。

哼，那么下来进入正题，绘制出我们今天的重点正方体
我们的html内容一般写三层结构，舞台，容器，内容，舞台用来设置perspective属性，简单说就是设置观看的距离；容器用来设置transform-style：preserve-3d，用来显示3D效果，内容一般就用来写我们的div框和文字就行。

然后来设置我们在外层wrap的css样式，一般写上相对定位和perspective就行，容器这一层我们就要来限制它的大小，旋转中心，还有3d效果，如图

然后我们给每个框设置相同的属性，比如大小等内容

然后我们来设置6个表面的位置，这里没什么可以说的，直接上代码
/*上*/
.div1{
left: 200px;
top: -200px;
background: #000;
transform:rotateX(-90deg);
transform-origin:bottom;
}
/*下*/
.div2{
left: 200px;
bottom: -200px;
background: #f00;
transform:rotateX(90deg);
transform-origin:top;
}
/*右*/
.div3{
left: 600px;
top: 200px;
background: #0f0;
transform:rotateY(-90deg);
transform-origin:left;
}
/*左*/
.div4{
left: -200px;
top: 200px;
background: #00f;
transform:rotateY(90deg);
transform-origin:right;
}
/*前*/
.div5{
left: 200px;
top: 200px;
background: #f0f;
transform:translateZ(400px);
}
/*后*/
.div6{
left: 200px;
top: 200px;
background: #ff0;
transform:translateZ(0);
}
#content:hover{
transform:rotateX(360deg) rotateY(360deg);
}
然后我们的3D正方体就形成了

怎么样看起来很高大上吧，图片中的黑线是舞台的边框，我一般习惯给div设置上边框，这样很容易去观察他在哪个位置，和其他位置的关系，喜欢的可以借鉴一下。