By default, 3D transformed elements share the same perspective

defined in the parent container.

So this means that our photos all have the same vanishing point in the 3D scene,

the point that keeps everything in perspective and creates realistic depth.

So because of this, some photos appear to have more depth than others,

making the rotation behavior of each photo different.

Notice how the photo on the left stretches out to the top left, and

the one on the right stretches out to the top right.

But the photo in the center has a flatter and perfectly centered rotation.

And you'll notice this more when you change the rotations to rotate Y and

set perspective origin back to the default center viewing position.

So I'm going to comment out the perspective origin declaration and

the content rule.

Then in the photo hover rule, I'll change the x value for

rotate x to zero and the y value to one.

Now you could also apply the same rotate 3D function to side B,

but I'll simply change it from rotateX to rotateY.

So now, the photos on the sides appear to jump out of the page and

if you resize the browser,

you can see just how inconsistent the rotations look on the page.

For this image gallery, I want the perspective to be the same for

every photo.

I want every photo to rotate exactly like the one in the middle.

To adjust this, I can move the perspective property to the parent div of each photo.

In the index.html file, notice how there's a div with the class,

photo container, wrapping each photo in the gallery.

So I'm going to make each of these photo container divs its own separate

3D container.

This will apply the same perspective to every photo.

So I'll move the perspective from content to photo container

by simply changing the selector to photo container.

And great this looks much better.

Now my rotations look consistent.

They all have the same depth and rotation behavior.

And notice how the photos on the sides no longer stretch out to the top left and

top right corners.