html - CSS3 变换“旋转”n 度

Question

我有一个由 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 来做到这一点。）

Answer 1

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