search

盒子

由于立方体只需要考虑一个尺寸，所以做起来比较容易。但是我们怎样处理一个不规则的长方体呢？也就是小孩子们讲的盒子。下面我们来做一个长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的相反数。

上一页立方体下一页轮播

最后更新于