Question

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.

Answer 1

You used:

-webkit-transform: rotateX([X]deg) translateZ(200px);

When you use only 100px I guess it should work, like this:

-webkit-transform: rotateX([X]deg) translateZ(100px);

EDIT

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:

http://css3.bradshawenterprises.com/flip/