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

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 Points
Posted by Samantha Atkinson
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 Points

My browser Chrome seems to be ignoring the backface-visibility: hidden;

I am 99% sure I've followed the code exactly, (although I'm human so could be wrong) for some reason when Guil gets to the part about giving just .side-a below code:

.side-a {
backface-visibility: hidden;
}

I can still see the backside of .side-a and once I finished the complete coding for the video it didn't work. When I used the dev-tools and switched off the z-index in main.css it works. But from reading other comments, this is not a good thing to do. So I'm really stumped and confused.

This is a Snapshot of my workspace. https://w.trhou.se/hgr153atib

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 Points
Samantha Atkinson
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 Points

I think I found the answer and that was to add:

.side-a,
.side-b {
  backface-visibility:hidden;
  transform-style: preserve-3d;
}

Although I would appreciate someone confirming this is correct as I thought you gave the parent container the transform-style property with the value preserve-3d, which in this case should be the .photo div which is the parent to .side-a and .side-b.

<div class="photo-container">
                <div class="photo">
                  <img class="side-a" src="img/photos/2.jpg" alt="International Space Station"> 
                  <div class="photo-desc side-b">
                      <h3>The Space Station</h3>
                      <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
                        <a href="#" class="button">download</a>
                    </div>
                </div>
            </div>
Ryan Markey
seal-mask
.a{fill-rule:evenodd;}techdegree
Ryan Markey
Front End Web Development Techdegree Student 12,565 Points
Ryan Markey
.a{fill-rule:evenodd;}techdegree
Ryan Markey
Front End Web Development Techdegree Student 12,565 Points

Your solution worked for me, Guil's instructions don't produce the correct outcome. Adding "transform-style: preserve-3d;" to side-a & side-b worked.

Jesse Cleary-Budge
.a{fill-rule:evenodd;}techdegree seal-36
Jesse Cleary-Budge
Front End Web Development Techdegree Graduate 15,359 Points

As of 7/9/20, I can only reproduce Guil's results using Sam's solution of adding transform-style: preserve-3d; to .side-a and .side-b. Adding the -webkit prefix before backface-visibility: hidden; does not work on the latest version of Opera (68.0.3618.173). Thanks, Sam!

6 Answers

Ryan Groom
Ryan Groom
18,674 Points

Firefox 10+ and IE 10+ support backface-visibility with no prefix. Opera (post Blink, 15+), Chrome, Safari, iOS, and Android all need -webkit-backface-visibility. - CSSTricks.com

So in your CSS under backface-visibility:hidden; you should put -webkit-backface-visibility: hidden;

Beau Sherman
PLUS
Beau Sherman
Courses Plus Student 6,325 Points
Beau Sherman
Beau Sherman
Courses Plus Student 6,325 Points

Adding the prefix didn't fix it for me. Only Samantha's solution worked.

Matthew McQuain
Matthew McQuain
14,184 Points
Matthew McQuain
Matthew McQuain
14,184 Points

Same here. Samantha's answer is the only one that works for me as of 7/6/20

Kate C
Kate C
13,589 Points
Kate C
Kate C
13,589 Points

Thank you so much. I had the same question.

Junior Aidee
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Junior Aidee
Front End Web Development Techdegree Graduate 14,657 Points
Junior Aidee
.a{fill-rule:evenodd;}techdegree seal-36
Junior Aidee
Front End Web Development Techdegree Graduate 14,657 Points

Hello, I'm currently having the same issue. I followed Guil's code but it's not working for me.

/* ================================= Photo 3D Transforms & Transitions ==================================== */

.content { perspective: 700px; }

.photo { transition: transform 1s cubic-bezier(.55, -.62, .27, 1.2);

}

.photo:hover { transform: rotateY(-180deg);

}

.side-a, .side-b { backface-visibility: hidden; transform-style: preserve-3d; }

.side-b { transform: rotateY(180deg); }

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 Points
Samantha Atkinson
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 Points

Wow, I have to say, I have had to move on from this course for my FEWD TD but I would love to have the time to fully debug this. One for a later date. But I am very happy that people have found my solution helpful. If anyone does debug this I will be the first to say Thank you and whoop whoop to them.

You're very welcome Jesse Cleary-Budge : )