CSS3 变换“旋转”n 度答案

【问题标题】：CSS3 transform rotate "by" n degreesCSS3 变换“旋转”n 度
【发布时间】：2012-02-15 02:16:12
【问题描述】：

我有一个由 4 个 div 组成的立方体（几乎），我正在使用 CSS3 转换（目前仅限于 -webkit，因为这是用于 Chrome 扩展的）。

但是，您会看到，如果您转到 http://jsfiddle.net/CxYTg/ 并单击“一”、“二”、“三”、“四”，然后再次单击“一”，则最后一个旋转方向相反方向重置回原来的方向。

有没有办法使用 CSS3 来解决这个问题？我想知道是否有办法做类似的事情：

#environment li.rota180:first-of-type .cubeface { -webkit-transform: rotateY( "by 90deg") translate3d(0, 0, 100px); }

（是的，我知道我可以使用 JavaScript 来做到这一点 - 但我想知道是否可以只通过 CSS 来做到这一点。）

【问题讨论】：

【解决方案1】：

纯 CSS 无法做到这一点。
为了以您想要的方式实现这一点，您需要变量和条件，使用 javascript 更容易。
您需要做的就是创建两个变量，一个用于度数，一个用于记住当前框。剩下的只是条件。

【讨论】：