CSS CSS Transitions and Transforms Adding 3D Effects with CSS Creating a Consistent Depth Perspective

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,549 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
13,403 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.