CSS CSS Transitions and Transforms Adding 3D Effects with CSS Build a Rotating 3D Cube

Kent Hefley
Kent Hefley
11,162 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
Adam Pizzo
11,277 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.

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,162 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,700 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

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

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

Kent Hefley
Kent Hefley
11,162 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

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

Kent Hefley
Kent Hefley
11,162 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