Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Transitions and Transforms Adding 3D Effects with CSS Activate 3D Space with perspective

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

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!

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

Steven Parker
Steven Parker
220,450 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

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

Gari Merrifield
Gari Merrifield
9,571 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Jason Rich
Front End Web Development Techdegree Student 10,036 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.