Pure CSS3 Cube Transition
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
So we decide to
margin-top:10px; the left face on
To change the
56px) when the top face is on
translate(10px) the right face (
As you can see, i added a second cube, who is auto-animated, i created this with the
animations specified just after the
/* animatons */ comment in on the css file.