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

Theresa Greene
Theresa Greene
Front End Web Development Techdegree Student 6,243 Points
Posted by Theresa Greene
Theresa Greene
Front End Web Development Techdegree Student 6,243 Points

only the front image rotates

I have re-watched the video a few times, matched my code and (think) I checked my spelling thoroughly but my cube does not rotate. It looks like the pictures are about in place, although not perfectly aligned, but the only image that rotates is the .front one.

Here is my workspace: https://w.trhou.se/f7yvnpnter

1 Answer

KRIS NIKOLAISEN
PRO
KRIS NIKOLAISEN
Pro Student 45,972 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
Pro Student 45,972 Points

Here it is transform-style: preserve-3d. You have transform.

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