Pure CSS3 Cube Transition
Today i have found this great experiment created by Thomas Cullen, problem, it uses javascript to make this animation and i decides to convert it into pure CSS3.
So this is a pure CSS3 three faces cube that you can :hover its faces to see them move.
It is created using basic div's to make the three faces, and CSS3 techniques to skew the faces at the right angle, using transform, to finally create the cube.
Then, we use an other transform propriety to allow us to move faces on X/Y axis, the translate.
So we decide to translate(-10px) and margin-top:10px; the left face on :hover
To change the margin-top at 66px(basically at 56px) when the top face is on :hover
And to translate(10px) the right face (.boxFront) on :hover.
As you can see, i added a second cube, who is auto-animated, i created this with the keyframes & animations specified just after the /* animatons */ comment in on the css file.