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 );
} 

（旋转相反的方式）