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

（旋轉oposite方式）