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 Build a Rotating 3D Cube

Posted by Jay Hinds
.a{fill-rule:evenodd;}techdegree seal-36
Jay Hinds
Treehouse Project Reviewer

Not a question... just another solution that may help others!

Some people have been having issues when the cube renders in Chrome. In Firefox it seems to work okay but in Chrome it appears to show the backface of each side.

A solution posted earlier was to use the "backface-visibility: hidden" property on the .front, .back, .left, and .right classes which appeared to help many people. This solution didn't work for me for some reason so I did a little more digging.

I came across another solution which was to add "opacity: 0.99" to the .front, .back, .left, and .right classes, which worked for me. I should mention I didn't need to use "backface-visibility: hidden" when using opacity.

Just thought I add this here to help others who may come across a similar issue!

3 Answers

melissamyra
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
melissamyra
Front End Web Development Techdegree Graduate 18,858 Points
melissamyra
.a{fill-rule:evenodd;}techdegree seal-36
melissamyra
Front End Web Development Techdegree Graduate 18,858 Points

My solution here with the chrome render issues was adding

backface-visibility: hidden;
transform-style: preserve-3d;

into the .front, .back, .left, .right declaration.

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

I did this course using Chrome and it performed as expected. As far as I know, anyone having issues has had a code error; and when the error is corrected the issue goes away.

Try sharing the snapshot you were having trouble with and perhaps we can find the cause.

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

UPDATE: You might be using the wrong kind of transforms. See the example in this other post where someone was having what sounds like a similar issue.