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

Kent Hefley
Kent Hefley
11,217 Points
Posted by Kent Hefley
Kent Hefley
11,217 Points

Anyone else having trouble with the cube in Chrome?

The cube doesn't seem to be working properly in Chrome. In both the final project files and workpaces, it's as if the front image has the wrong z-index. It works perfectly in Firefox.

4 Answers

Adam Pizzo
.a{fill-rule:evenodd;}techdegree seal-36
Adam Pizzo
Python Development Techdegree Graduate 19,355 Points

Hello Kent,

I added the:

backface-visibility: hidden;

property to the .front, .back, .left, .right rule to make it so that it wasn't having that weird graphical issue. I wasn't seeing it on Firefox, but I was seeing it on chrome. Hope it helps you or anyone else seeing that.

Carmina De la Pena
Carmina De la Pena
4,010 Points

Thanks Adam! Been scratching my head for 30 mins and I thought it has something to do with the values on the translate/rotate numbers. This solved my problem!

Kent Hefley
Kent Hefley
11,217 Points
Kent Hefley
Kent Hefley
11,217 Points

That was the issue. Thank you for doing the legwork in finding the solution. I couldn't figure it out.

Julianna Kahn
Julianna Kahn
20,702 Points
Julianna Kahn
Julianna Kahn
20,702 Points

Yes, that took care of the problem. Thank you so much for posting. At first it was impossible to find out what I might of done wrong. Then I ran Guil's "final" file and that didn't work right either. So nice to get this resolved.

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

I had the same see-thru cube effect that was in the video that Kent posted. To fix this, I added your fix plus perserve-3d to the .front, .back. left, .right rule. I hope this helps anyone who is still having an issue:

 backface-visibility: hidden;
 transform-style: preserve-3d;
Irina Piliugina
Irina Piliugina
8,678 Points
Irina Piliugina
Irina Piliugina
8,678 Points

Thank you a lot Adam Pizzo. You solved my problem!

Adam Pizzo
.a{fill-rule:evenodd;}techdegree seal-36
Adam Pizzo
Python Development Techdegree Graduate 19,355 Points

Glad it helped!

:)

Kent Hefley
Kent Hefley
11,217 Points
Kent Hefley
Kent Hefley
11,217 Points

I have tested this on other computers. It is not working properly in Chrome.

again here is a link demonstrating the issue. https://youtu.be/W_mzVI67iEM

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,972 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,972 Points

I uploaded the project files to a workspace and to me the page looks identical in Chrome and Firefox

Kent Hefley
Kent Hefley
11,217 Points
Kent Hefley
Kent Hefley
11,217 Points

This is very odd. It does not display correctly in any case of google chrome for me. I've opened the code in live server on vs code, tried the workspace, and even codepen. I've checked for chrome updates, windows updates and graphic driver updates. I've tried this with all extensions disabled. It works fine in Firefox, Opera and Edge.

I have recorded a short video showing the problem https://youtu.be/W_mzVI67iEM