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

Anthony Rice
Anthony Rice
7,976 Points
Posted by Anthony Rice
Anthony Rice
7,976 Points

Difficulties understanding the transform-origin property in 3D space.

Hi. I am having difficulties understanding how the transform-origin property works in this 3D cube example. (When using the transform property on a 2D object, it makes perfect sense.)

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Are you sure you remembered to save your change and refresh your browser?

When I remove the transform-origin property from the .back class, the back panel protrudes halfway out from the center of the right side. The other half is inside the cube.

I thought it made a good example of the use of the transform in the 3D model.

Anthony Rice
Anthony Rice
7,976 Points
Anthony Rice
Anthony Rice
7,976 Points

When I commented out the transform-origin property on .back, saved the changes, and refreshed the browser on both firefox and chrome, the cube appears unchanged.

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

However, when I comment out the transform-origin property on .left, the cube is off. 

.left {
  transform: rotateY(-270deg) translate3d(110px, 0, 0);
/*  transform-origin: top right; */
}

I still do not quite understand the transform-origin property in 3D space. What is the frame of reference on "top right"?

In order for me to understand this, I adjusted the transform-origin to "center" on .left and changed it from translateX(110px) to translateZ(110px).

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