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 trialShuming Li
Courses Plus Student 3,592 PointsThe backface-visibility property is not working.
.content { perspective: 700px; }
.photo { transition: transform 1s ease-out; transform-style: perserve-3d; }
.photo:hover { transform: rotateY(-180deg); }
.side-a, .side-b { backface-visibility: hidden; }
.side-b { transform: rotateY(180deg); }
4 Answers
Steven Parker
231,198 PointsIt's just a typo. You have "perserve-3d" instead of "preserve-3d".
The "backface-visibility" property only works when ""preserve-3d" is set.
Tomasz Denkiewicz
11,778 PointsI had the same problem. You'll have to add property transform-style: preserve-3d to .side-a, side-b
.content {
perspective: 700px;
}
.photo {
transition: transform 1s ease-in-out ;
transform-style: preserve-3d;
}
.photo:hover {
transform: rotateY(-180deg);
}
.side-a,
.side-b {
backface-visibility: hidden;
transform-style: preserve-3d;
}
.side-b {
transform: rotateY(180deg);
}
/* it works on my machine ¯\_(ツ)_/¯ */
Gari Merrifield
9,597 PointsYou also need to add "transform-style: preserve-3d;" on the ".photo-container" if this problem is while using Firefox.
Jon Legler
6,162 PointsMy backface-visibility isn't working as well
.content{ perspective:700px; } .photo{ transition: transform 1s ease-out; transform-style: preserve-3d; } .photo:hover{ transform: rotatey(-180deg); }
.side-a{ backface-visibility: hidden; }
I have tried a variety of fixes from the forums and nothing seems to work.
Steven Parker
231,198 PointsThe transform name "rotateY" needs a capital "Y".
Shuming Li
Courses Plus Student 3,592 PointsShuming Li
Courses Plus Student 3,592 Pointsthank you so much!
Shuming Li
Courses Plus Student 3,592 PointsShuming Li
Courses Plus Student 3,592 PointsIt still doesn't work after I corrected it.
.content { perspective: 700px; }
.photo { transition: transform 1s cubic-bezier(.55, -.62, .27, 1.2); transform-style: preserve-3d; }
.photo:hover { transform: rotateY (-180deg); }
.side-a, .side-b { backface-visibility: hidden; }
.side-b { transform: rotateY(180deg); }
Steven Parker
231,198 PointsSteven Parker
231,198 PointsYou apparently made other changes while applying the fix. The new code has a space between "rotateY" and the argument in parentheses that follows it, which causes the ".photo:hover" rule to be ignored.