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 Activate 3D Space with perspective

Issues w/ Firefox browser, unsure why? Have checked the values in CSS, brackets closed,and they are correct...?

Possibly old browser.. possibly doesn't have support? Dunno.

I recently had this on Firefox 78.0.2 on Window 10 and did not have on Chrome. After searching found this:

https://stackoverflow.com/questions/23080112/css-perspective-not-working-in-firefox

showing a Bug from 2014 that's still open, & is a problem for me. CSS 3D perspective only works in Firefox on direct children of the perspective property. So if I apply perspective to .photo-container and not .content I see the 3d transformation as intended.

Still an issue with Firefox 87.0 (64-bit) on Windows 10. Works fine in Chrome.

2 Answers

I don't think it's an old browser, if you follow the Teachers Notes link to MDN, it says Firefox 16 and up support these options.

I do seem to remember that there are some quirks with Firefox and the 3d placement, but it should give you items not where you expect, rather than not at all.

I believe the bigger issues were with trying to use percentages for positioning.

Doesn't currently appear to work in Chrome 98.0.4758.80 (Official Build) (x86_64). Does work for me in Safari 15.2 (17612.3.6.1.6), however.