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 Create a Flipping Animation with 3D Transform Properties

Posted by Luca Di Pinto
Luca Di Pinto
8,051 Points

.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??

Thanks

Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points
Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 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,597 Points
Gari Merrifield
Gari Merrifield
9,597 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.