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 CSS Transitions and Transforms Adding 3D Effects with CSS Build a Rotating 3D Cube

Lisa Walters
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Lisa Walters
Front End Web Development Techdegree Graduate 15,255 Points
Posted by Lisa Walters
.a{fill-rule:evenodd;}techdegree seal-36
Lisa Walters
Front End Web Development Techdegree Graduate 15,255 Points

Order of Translate and Rotate?

Hello! I noticed in the following code that the order of translate and rotate are switched between .back and .left. I tried reversing the order and found that it destroyed the shape of my cube, so it really does matter. But why? Thanks for help and clarification!

.back { transform: translateZ(-110px) rotateY(270deg); transform-origin: center left; }

.left { transform: rotateY(-270deg)translateX(110px); transform-origin: top right; }

4 Answers

Peter Vann
Peter Vann
36,425 Points

This might help:

https://css-tricks.com/almanac/properties/t/transform/

One thing to note:

When multiple operations are performed in a single transform property, the order of execution is right-to-left, which, to me, is counter-intuitive.

In this example (taken from the above article):

.element {
  width: 20px;
  height: 20px;
  transform: scale(20) skew(-20deg);
}

"It’s worth noting that there is an order in which these transforms will be carried out, in the example above skew will be performed first and then the element will be scaled."

I hope that helps. Happy coding!

Bonus:

A cool effect:

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_image_gallery

Peter Vann
Peter Vann
36,425 Points
Peter Vann
Peter Vann
36,425 Points

Lisa,

If it makes you feel any better, I didn't know that either until a researched your question. LOL

Lemmeno if you have any other questions.

Have a great rest of the weekend and stay safe!

-Pete (or Peter - no preference!?!)