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 Creating a Consistent Depth Perspective

Costas Plassaras
Costas Plassaras
4,359 Points
Posted by Costas Plassaras
Costas Plassaras
4,359 Points

Why are the side-photos "jumping"out of their frame? Just because we changed from rotateX to rotateY?

Maybe I lost my concentration earlier when learning the 3-d rotation but I would like to grasp this one guys better, thanks!

2 Answers

Gari Merrifield
Gari Merrifield
9,597 Points
Gari Merrifield
Gari Merrifield
9,597 Points

It's actually the perspective-origin causing this. With the perspective being set on the wrapper, there is a single point of origin for all the elements in the container. When Guil moved perspective from the main wrapper ( .content ) to the individual wrappers ( .photo-container ), the point of origin became unique to each of the individual wrappers. Think of looking at paintings on a wall, from a single point, they look skewed as they get further to the sides of your location. However, their perspectives will look much the same if you move to the same distance and angle in front of each painting.

Guil changes the layout's perspective from a single point, to multiple points, making the effects appear consistent across the page.

A quick video on perspective that may help, Understanding 1, 2 & 3 Point Perspective in under 1 minute!

Dennis Amiel Domingo
Dennis Amiel Domingo
17,813 Points
Dennis Amiel Domingo
Dennis Amiel Domingo
17,813 Points

It's all because of the CSS property called "perspective." When we alter the perspective property, we're changing how near or far the object is from the viewer. When you check the workspace for that video, in the interactions.css file, you'd notice that the value of the perspective property is set to 700px. Now the rotation of the image is greatly affected and behaves differently between the X axis and the Y axis. And it's all because they're viewed in a different perspective.