Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

shaun bolak
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
shaun bolak
Front End Web Development Techdegree Graduate 18,080 Points
Posted by shaun bolak
.a{fill-rule:evenodd;}techdegree seal-36
shaun bolak
Front End Web Development Techdegree Graduate 18,080 Points

Could someone explain the z-value and positioning (in main CSS file) to make 3D rotation possible?

I feel as thought the technique was explained well. However the CSS positioning and set-up was glanced over. I would like to thoroughly understand how to set this up.

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

You didn't provide a link the course page, but I expect you're working with the demo that has 3 cubes that rotate on mouse hover.

The important thing to bear in mind about that demo is that there are two different things going on — one is the construction in 3-D of the cubes themselves, and the other is the rotation effect on hover.

Note that the rotation and axis offsets are used to build the cube shapes within a container, and these positions are not part of the transitions that produce the animation effect.

Each cube is constructed inside a container element, and it is the container that is rotated dynamically to create the effect.

Hopefully it will make more sense when you look at it again now.