盒子

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

.box__face--right,
.box__face--left {
  width: 100px;
  height: 200px;
  left: 100px;
}

.box__face--top,
.box__face--bottom {
  width: 300px;
  height: 100px;
  top: 50px;
}

为了让长方体的各个平面在3D空间内正确定位，旋转的值与立方体一样保持不变，但是平移的值是不同的。由于立方体宽是100px，所以前、后面各向外平移50px。长是300px，所以左、右侧面分别向两边平移150px。高是200px，所以上、下面分别移动100px。

.box__face--front  { transform: rotateY(  0deg) translateZ( 50px); }
.box__face--back   { transform: rotateY(180deg) translateZ( 50px); }

.box__face--right  { transform: rotateY( 90deg) translateZ(150px); }
.box__face--left   { transform: rotateY(-90deg) translateZ(150px); }

.box__face--top    { transform: rotateX( 90deg) translateZ(100px); }
.box__face--bottom { transform: rotateX(-90deg) translateZ(100px); }

就像正方体的例子，为了可以露出某一个面，需要在#box上添加与各平面变换值相反的样式，取每个相应平面的translateZ和rotate的相反数。

.box.show-front  { transform: translateZ( -50px) rotateY(   0deg); }
.box.show-back   { transform: translateZ( -50px) rotateY(-180deg); }
.box.show-right  { transform: translateZ(-150px) rotateY( -90deg); }
.box.show-left   { transform: translateZ(-150px) rotateY(  90deg); }
.box.show-top    { transform: translateZ(-100px) rotateX( -90deg); }
.box.show-bottom { transform: translateZ(-100px) rotateX(  90deg); }

最后更新于6年前

这有帮助吗？