盒子
由于立方体只需要考虑一个尺寸，所以做起来比较容易。但是我们怎样处理一个不规则的长方体呢？也就是小孩子们讲的盒子。下面我们来做一个长300px，宽100px，高200px的长方体。
首先HTML保持不变。
<div class="scene">
<div class="box">
<div class="box__face box__face--front">front</div>
<div class="box__face box__face--back">back</div>
<div class="box__face box__face--right">right</div>
<div class="box__face box__face--left">left</div>
<div class="box__face box__face--top">top</div>
<div class="box__face box__face--bottom">bottom</div>
</div>
</div>CSS与立方体的大体相同，只需要变更一些尺寸：width: 300px，height: 200px并且由于宽现在是100px，所以.box里需要调整一个translateZ(-50px)。
.scene {
width: 300px;
height: 200px;
perspective: 500px;
}
.box {
width: 200px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-50px);
}
.box__face--front,
.box__face--back {
width: 300px;
height: 200px;
}
.box__face--right,
.box__face--left {
width: 100px;
height: 200px;
}
.box__face--top,
.box__face--bottom {
width: 300px;
height: 100px;
}
在将position: absolute应用到每个平面后，他们都堆叠到了.box的左上角。
为了将各个平面在3D空间内从盒子的中心向外平移，我们需要将它们聚集在中心。为此我们添加top和left属性，为.box__face--left和.box__face--right添加left: 100px，为.box__face--top 和 .box__face--bottom添加 top: 50px。
为了让长方体的各个平面在3D空间内正确定位，旋转的值与立方体一样保持不变，但是平移的值是不同的。由于立方体宽是100px，所以前、后面各向外平移50px。长是300px，所以左、右侧面分别向两边平移150px。高是200px，所以上、下面分别移动100px。
就像正方体的例子，为了可以露出某一个面，需要在#box上添加与各平面变换值相反的样式，取每个相应平面的translateZ和rotate的相反数。
最后更新于