CSS3绘制立方体

CSS3绘制立方体

CSS3绘制立方体有两种方式：

立方体.png

• 第一种方式简单粗暴，不需要考虑各个面的旋转角度。

注意：只要想做3D的效果，首先要创建一个三维的空间：transform-style: preserve-3d;

1. 假设初始状态是6个面重叠在一起，每条边长为300px。

2. 让1沿Z轴向上平移150px，2沿Z轴向下平移150px（即-150px）

3. 让3沿Y轴向上平移150px（即-150px），4沿Y轴向下平移150px，分别旋转90deg

4. 让5沿X轴向右平移150px，6沿X轴向左边平移150px（即-150px），分别旋转90deg

代码如下：

• HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

• CSS

* {
    margin: 0;
    padding: 0
}

ul li {
    list-style: none;
}

ul {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform-style: preserve-3d;
    transform: rotateX(30deg) rotateY(-30deg);
}

ul li {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: .6;
}

ul li:nth-child(1) {
    transform: translateZ(150px);
    background: red;
}

ul li:nth-child(2) {
    transform: translateZ(-150px);
    background: green;
}

ul li:nth-child(3) {
    transform: translateY(-150px) rotateX(90deg);
    background: blue;
}

ul li:nth-child(4) {
    transform: translateY(150px) rotateX(90deg);
    background: rgb(255, 0, 191);
}

ul li:nth-child(5) {
    transform: translateX(150px) rotateY(90deg);
    background: yellow;
}

ul li:nth-child(6) {
    transform: translateX(-150px) rotateY(90deg);
    background: #000;
}

• 第二种方式需要一定的空间感，更有利于自身建立三维的模型。

这种方式每次调整的单位为一个边长，所以尤其强调旋转的方向

注意：X轴以右为正方向，Y轴向下为正方向，Z轴以向屏幕外面为正方向

1. 假设初始状态是6个面重叠在一起，1作为立方体的顶端
2. 让2以右边为转轴，绕Y轴逆时针转动90度
3. 让3以左边为转轴，绕Y轴顺时针转动90度
4. 让4以上边为转轴，绕X轴逆时针转动90度
5. 让5以下边为转轴，绕X轴顺时针转动90度
6. 让6沿Z轴向后（-300 px）平移一个边长

• CSS

* {
    margin: 0;
    padding: 0
}

ul li {
    list-style: none;
}

ul {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform-style: preserve-3d;
    transform: rotateX(30deg) rotateY(-30deg);
}

ul li {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: .6; 
}

ul li:nth-child(1) {
    background: red;
}

ul li:nth-child(2) {
    /*点数为2的面以右边为转轴转动*/
    transform-origin: right;
    /*绕Y轴逆时针转动90度*/
    transform: rotateY(-90deg);
    background: green;
}

ul li:nth-child(3) {
    transform-origin: left;
    /*点数为3的面以左边为转轴转动*/
    transform: rotateY(90deg);
    /*绕Y轴顺时针转动90度*/
    background: blue;
}

ul li:nth-child(4) {
    transform-origin: top;
    /*点数为4的面以上边为转轴转动*/
    transform: rotateX(-90deg);
    /*绕X轴逆时针转动90度*/
    background: rgb(255, 0, 191);
}

ul li:nth-child(5) {
    transform-origin: bottom;
    /*点数为5的面以下边为转轴转动*/
    transform: rotateX(90deg);
    /*绕X轴顺时针转动90度*/
    background: yellow;
}

ul li:nth-child(6) {
    /*点数为6的面沿Z轴向后平移300px*/
    transform: translateZ(-300px);
    background: #000;
}