Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Sam Weeks
seal-mask
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points
Posted by Sam Weeks
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points

confused regarding the 3d cube effect

the output to this video plus another on this course hasn't worked. Very confused now about how this concept works; no idea why it hasn't, so If anyone can help it would be much appreciated. 

.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: centre left;
}

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

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

1 Answer

Skye Breeze
Skye Breeze
10,620 Points
Skye Breeze
Skye Breeze
10,620 Points

Here is my code that I used which worked. I have the "transform-style: preserve-3d" and "backface-visibility: hidden" both in the element targeting all 4 sides as this solved another issue. The 'back' side is the one with the text and info button and if we are rotating the cube 270degrees anti-clockwise, then we will want this on the left side, so that it's visible when the cube has finished rotating.

The front image is moved 110px (half the image width) forwards, and the back (left in this case) image -110px in the Z axis. The right image is rotated 90 degrees on the Y axis to face outwards, and translated 110px on the X axis to move it to the side of the cube. The left image is rotated 180 degrees so that its hidden backface is inside the cube with the front facing outwards, and its position has been translated -110px on the Z axis to move it to the back of the 3D cube.

========= .front, .back, .left, .right { transform-style: preserve-3d; backface-visibility: hidden; width: 100%; height: 100%; display: block; position: absolute; }

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

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

.back { transform: translateX(-110px) rotateY(-90deg); }

.right { transform: translateX(110px) rotateY(90deg);

}