CSS CSS Transitions and Transforms Adding 3D Effects with CSS Create a Flipping Animation with 3D Transform Properties

.photo working in 3d space. Why??

Hi guys,

not so clear why .photo is working in 3d space even if it's not direct child of content! Guil says that we have to apply preserve-3d to all elements that are not direct children of .content but, as i can see, aven .photo is not a direct child of it! So why does it work? In the video before we did not apply preserve-3d and it worked! Do not we have to apply to it preserve-3d? Why??


Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,861 Points

Sorry Luca. I am not a fluent CSS user, so I can't really say why this is. Hope you get an answer!

Gari Merrifield
Gari Merrifield
9,554 Points

In Firefox, it seems to use the "flat" rather than "preserve-3d" as the default, as Guil stated in the video. While other browsers that I have tried this on, appear to use "preserve-3d" as the default value ( Safari, Chrome, Chromium. )

In Firefox, if I add ".photo-container { transform-style: preserve-3d; }", the features then work as they do in other browsers.