Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 Cube with unordered list

CSS3 Cube with unordered list

Problem

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.

Problem courtesy of: Akshay Aurora

Solution

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/

Solution courtesy of: insertusernamehere

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 Cube with unordered list

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×