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,813 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

Pro Student 49,925 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;