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

Kent Hefley
Kent Hefley
11,158 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
Front End Web Development Techdegree Student 8,958 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,158 Points

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

KRIS NIKOLAISEN
PRO
KRIS NIKOLAISEN
Pro Student 46,124 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,158 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

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

Irina Piliugina
Irina Piliugina
4,469 Points

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