html - 生成的 CSS3 变换处理矩形

Question

我正在尝试使用 CSS 创建本质上是机架的东西。这是我现在拥有的演示笔。

http://codepen.io/aherrick/pen/BzrnL

除以下内容外，一切正常。请看下图作为表示。当渲染内部矩形时，它们基本上在“左侧”翻转。这是由于第一个矩形在 0,0 处呈现

有没有想过如何在保持通用方法渲染矩形的同时解决这个问题？

Answer 1

如果我没理解错的话，您希望交换左侧的“a”和“b”框。

获得它的一种方法是改变它

.rack .left {
    -webkit-transform: rotateY(90deg) translateZ( -296px );
    -moz-transform: rotateY(90deg) translateZ( -296px );
    -o-transform: rotateY(90deg) translateZ( -296px );
    transform: rotateY(90deg) translateZ( -296px );
} 

对此

.rack .left {
    -webkit-transform: rotateY(-90deg) translateZ( 296px );
    -moz-transform: rotateY(-90deg) translateZ( 296px );
    -o-transform: rotateY(-90deg) translateZ( 296px );
    transform: rotateY(-90deg) translateZ( 296px );
} 

(向相反方向旋转)