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 trialSamantha Atkinson
Front End Web Development Techdegree Graduate 40,307 PointsMy 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
Ryan Markey
Front End Web Development Techdegree Student 12,565 PointsYour 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
Front End Web Development Techdegree Graduate 15,359 PointsAs 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
18,674 PointsFirefox 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;
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 PointsThank you Ryan, I realised that much later as I read the MDN. Thank you for confirming.
Beau Sherman
Courses Plus Student 6,325 PointsAdding the prefix didn't fix it for me. Only Samantha's solution worked.
Paul Van Leuven
Front End Web Development Techdegree Student 7,105 PointsYea the only solution that worked for me was Samantha's
.side a, .side-b { transform-style: preserve 3d; backface-visibility: hidden; }
Matthew McQuain
14,184 PointsSame here. Samantha's answer is the only one that works for me as of 7/6/20
Kate C
13,589 PointsThank you so much. I had the same question.
Junior Aidee
Front End Web Development Techdegree Graduate 14,657 PointsHello, 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
Front End Web Development Techdegree Graduate 40,307 PointsWow, 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 : )
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 PointsSamantha Atkinson
Front End Web Development Techdegree Graduate 40,307 PointsI think I found the answer and that was to add:
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.