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

Posted by Zeljko Porobija
Zeljko Porobija
11,491 Points

Nothing happens...

I wrote the exact code in the video - and no 3D effect happened. Any clue? Here's my code:

Zeljko Porobija
Zeljko Porobija
11,491 Points
interactions.css 
.content {
  perspective: 700px; 
}

.photo {
  transform: rotateX(-35deg);
}```

5 Answers

rays0
rays0
16,293 Points

I also use Firefox and had some inconsistencies with transform: rotateX(xxxdeg);

From several videos later, there's an instruction about moving where perspective is added. What i've found is when the perspective property is applied on .photo-container instead of .content, the transforms work as expected on Firefox browsers (12/29/16).

Diana Rooks
Diana Rooks
25,134 Points
Diana Rooks
Diana Rooks
25,134 Points

I was a bit confused about this myself. I am using Firefox, and when I applied transform: rotateX() to the .photo class the images appeared squished vertically but not rotated. I was able to achieve the desired effect in two different ways. First, I changed the .photo class selector to .photo-container, which is a direct child of .content:

<div class="content clearfix">

            <div class="photo-container">
                <div class="photo">
                  <img class="side-a" src="img/photos/1.jpg" alt="Dazzling Auroras over Earth">

.content {
    perspective: 700px;
}

.photo-container {
    transform: rotateX(-35deg);
}

Alternately, I kept the class selectors as presented in the video and set the transform-style property (explained in the next video) of the .photo-container class to preserve-3d. This extends the 3d space to children of .photo-container, e.g. .photo.

.content {
    perspective: 700px;
}

.photo-container {
    transform-style: preserve-3d;
}

.photo {
    transform: rotateX(-35deg);
}

Good luck!

paul oram
paul oram
3,429 Points

2 years later and this still proves useful! Thanks.

Steven Parker
Steven Parker
240,995 Points
Steven Parker
Steven Parker
240,995 Points

Check your browser type and version (Can I Use? is a good resource for this) to be sure that these features are supported, or if they might require a browser-specific prefix.

wilsonmizhquiri
wilsonmizhquiri
19,864 Points
wilsonmizhquiri
wilsonmizhquiri
19,864 Points

I added this .content, .photo-container { perspective: 700px; transform-style:preserve-3d; }

Gari Merrifield
Gari Merrifield
9,598 Points
Gari Merrifield
Gari Merrifield
9,598 Points

Here we are, almost two years later, and the same inconsistencies still exist.

Diana Rooks' answer provides the best fix, with adding the "transform-style: perserve-3d;" on the ".photo-container" class. Chrome appears to have assumed that option as a default.

The other answers regarding adding the "perspective" to ".photo-container" change the results, the perspective is then relative to each photo-container, producing an entirely different result.

I have verified this on Firefox and Chromium under Linux Mint 18.3 and on Safari, Firefox and Chrome under OS X Yosemite.

Jason Rich
.a{fill-rule:evenodd;}techdegree
Jason Rich
Front End Web Development Techdegree Student 10,048 Points

Five years on and Firefox still shows the same issue.

I saw another Forum post about this issue before this one. I'm using Firefox 87.0 (64-bit) on Windows 10 and Diana's workaround is still needed to make it work.