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更容易。
您需要做的就是为度数创建两个变量，为记住当前框创建一个变量。其余的只是条件。