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

Posted by Raj Shinghanya
.a{fill-rule:evenodd;}techdegree
Raj Shinghanya
Front End Web Development Techdegree Student 77 Points

what is the use of transform-origin in 3d photo cube project

i cant understand this video this is the video link : https://teamtreehouse.com/library/build-a-rotating-3d-cube#questions

in this video transform-origin is very harder to understand

1 Answer

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

The "transform-origin" sets the reference point for the application of transform effects.

A visual demonstration might be more helpful to understanding than just an explanation. See the MDN page on transform-origin where there are several graphic examples that show what it does.

Raj Shinghanya
.a{fill-rule:evenodd;}techdegree
Raj Shinghanya
Front End Web Development Techdegree Student 77 Points

hi steven i understand what is transfom-origin but why he used top left top right values while rotating a cube

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

When the optional z-axis setting is omitted, the origin remains in the object plane. If I recall, these settings apply only to the individual faces.