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 trialLisa Walters
Front End Web Development Techdegree Graduate 15,255 PointsOrder 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
36,427 PointsThis 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
Lisa Walters
Front End Web Development Techdegree Graduate 15,255 PointsThank you, Peter! I never realized that about the right to left order. That IS counterintuitive!
Peter Vann
36,427 PointsLisa,
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!?!)
Lisa Walters
Front End Web Development Techdegree Graduate 15,255 PointsThanks so much! :)