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

Erin Clayton
Erin Clayton
3,840 Points

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.

Craig Varley
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Craig Varley
Front End Web Development Techdegree Graduate 13,644 Points

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.

2 Answers

Gari Merrifield
Gari Merrifield
9,598 Points

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.