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 trialSam Weeks
Front End Web Development Techdegree Student 16,699 Pointsconfused 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
10,620 PointsHere 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);