CSS3 变换“按”旋转n 度
我有一个由 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 来做到这一点。）
I have a cube (well almost) made up of 4 divs which I'm rotating using CSS3 transforms (currently limited to -webkit as this is for a Chrome extension.)
However, you'll see that if you go to http://jsfiddle.net/CxYTg/ and click "one", "two", "three", "four", and then on "one" again, the last rotation goes in the opposite direction to reset back to the original orientation.
Is there a way to fix this using CSS3? I'm wondering if there's a way to do something like:
#environment li.rota180:first-of-type .cubeface { -webkit-transform: rotateY( "by 90deg") translate3d(0, 0, 100px); }
(And yes, I know I could just do this using JavaScript - but I'd like to find out if it's possible to do it through CSS only.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
没有办法用纯 css 来做到这一点。
为了按照您想要的方式实现这一点，您需要变量和条件，使用 javascript 更容易。
您需要做的就是创建两个变量，一个用于度数，另一个用于记住当前框。剩下的只是条件。
There is no way to do it with pure css.
For implementing this the way you wanted, you need variables and conditions, Use javascript it's easier.
All you need to do is create two variables one for the degrees and one for remembering the current box. The rest is just conditions.