I'm currently working on a cube-like element made up of 4 divs that I am rotating using CSS3 transforms (limited to -webkit for a Chrome extension).
But there's an issue, if you visit http://jsfiddle.net/CxYTg/ and click through "one", "two", "three", "four", and then back to "one", the final rotation goes in the opposite direction to reset to the original position.
Is there a way to solve this problem using CSS3? I'm curious about potentially using something like:
#environment li.rota180:first-of-type .cubeface { -webkit-transform: rotateY( "by 90deg") translate3d(0, 0, 100px); }
(I acknowledge that JavaScript could be used to fix this easily, but I want to explore the possibility of achieving it solely through CSS.)