由于立方体只需要考虑一个尺寸,所以做起来比较容易。但是我们怎样处理一个不规则的长方体呢?也就是小孩子们讲的盒子。下面我们来做一个长300px,宽100px,高200px的长方体。
<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>
.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;
}
.box__face--right,
.box__face--left {
width: 100px;
height: 200px;
left: 100px;
}
.box__face--top,
.box__face--bottom {
width: 300px;
height: 100px;
top: 50px;
}
.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.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); }