CSS3 Cube with unordered list
I've seen many CSS3 Cube using div's, wanted to create the same with unordered list.
I managed to create the cube here http://codepen.io/iakshay/full/2/10. But I'm getting some extra margins between the faces.
Can't figure out whats going wrong.
-webkit-transform: rotateX([X]deg) translateZ(200px);
When you use only
I guess it should work, like this:
-webkit-transform: rotateX([X]deg) translateZ(100px);
Basically you have to use half the width because
rotateXYZ rotates the element at a point in the middle. When done you're already half the way and only have to add the "rest".
Here is a good example to see this effect on a mouseover:
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here