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

Clinton Tessin
Clinton Tessin
9,602 Points

One of the sides is not working.

I have been looking at this code over and over. I cannot seem to find the error that is causing one of the sides of the cube to not face forward. Please Help!

/* ================================= Button Transitions ==================================== */

.button { transition: background .3s; } .button:hover { background: rgba(74,137,202, 1); }

/* ================================= Photo 3D Transforms & Transitions ==================================== */

.cube-container { box-shadow: 0 18px 40px 5px rgba(0,0,0,.4); perspective: 800px; }

.photo-cube { transition: transform 2s ease-in-out; width: 220px; height: 200px; transform-style: preserve-3d; }

.photo-cube:hover { transform: rotateY(-270deg); }

.front, .back, .left, .right { width: 100%; height: 100%; display: block; position: absolute; }

.front { transform: translateZ(110px); }

.back { transform: translateZ(-110px) rotateY(270deg); transform-origin: center left; }

.left { transform: rotateY(-270deg) tanslateX(110px); transform-origin: top right; }

.right { transform: translateZ(-110px) rotateY(180deg); }

1 Answer

Steven Parker
Steven Parker
163,562 Points

It's just a typo. In your ".left" class CSS rule you have "tanslateX" (no "r") instead of "translateX".

Clinton Tessin
Clinton Tessin
9,602 Points

Haha! I knew it was going to be something like that. Thank you very much for pointing that out.