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
Unsubscribed User
6,269 PointsSo I have the problem with images shining throw each other
Here is my CSS code, I did everything excatly like the Guil said but the images are shining through each other. What is wrong?
/* =================================
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;
backface-visibility: hidden;
}
.front {
transform: translateZ(110px);
}
.back {
transform: translateZ(-110px) rotateY(270deg);
transform-origin: center left;
}
.left {
transform: rotateY(-270deg) translateX(110px);
transform-origin: top right;
}
.right {
transform: translateZ(-110px) rotate(180deg);
}
Jesse Cleary-Budge
Front End Web Development Techdegree Graduate 15,359 PointsThe solution as given by Guil is not working as of 7/10/2020 in the current version of Opera (69.0.3686.57). Ryan Markey's solution worked for me. Thanks, Ryan!
4 Answers
Steven Parker
231,269 PointsThat opacity trick is just a hack that conceals the real issue, which can be resolved just by changing the type of transform being used.. Just convert the three lines shown here and your transitions will work exactly as intended with no other changes:
.front {
/*transform: translateZ(110px); <- change this... */
transform: translate3d(0, 0, 110px); /* <- ...to this */
}
.left {
/*transform: rotateY(-270deg) translateX(110px); <- change this... */
transform: rotateY(-270deg) translate3d(110px, 0, 0); /* <- ...to this */
transform-origin: top right;
}
.right {
/*transform: translateZ(-110px) rotate(180deg); <- change this... */
transform: translateZ(-110px) rotateY(180deg); /* <- ...to this */
}
Olivia Posch
Front End Web Development Techdegree Graduate 19,720 Pointsthe solution from Kris Nikolaise (down) works perfectly for me . Why? I don't really understand .... :-( ???
Steven Parker
231,269 PointsClearly, setting "opacity" to .99 (instead of the default of 1) is not genuinely intended to change the opacity. But it causes a side-effect of altering what is known as the stacking context of the element, which changes the rendering order. This causes the elements to be rendered in layers instead of conforming to the 3-D perspective space (which is the point of the exercise).
For the technical details, see the MDN page on The stacking context and related pages linked from it.
Maya Liberman
Full Stack JavaScript Techdegree Graduate 26,360 PointsUnfortunately you solution does not work with not using the opacity. Any idea why?
.cube-container { box-shadow: 0 18px 40px 5px rgba(0, 0, 0, 0.4); perspective: 800px; }
.photo-cube { transition: transform 2s ease-in-out; width: 220px; height: 220px; transform-style: preserve-3d; }
.photo-cube:hover { transform: rotateY(-270deg); }
.front, .back, .left, .right { width: 100%; height: 100%; display: block; position: absolute; opacity: 0.99; }
.front { /transform: translateZ(110px); <- change this... */ transform: translate3d(0, 0, 110px); / <- ...to this */ }
.back { transform: translateZ(-110px) rotateY(270deg); transform-origin: center left;
}
.left { /transform: rotateY(-270deg) translateX(110px); <- change this... */ transform: rotateY(-270deg) translate3d(110px, 0, 0); / <- ...to this */ transform-origin: top right; }
.right { /transform: translateZ(-110px) rotate(180deg); <- change this... */ transform: translateZ(-110px) rotateY(180deg); / <- ...to this */ }
KRIS NIKOLAISEN
54,971 PointsHere is a solution from a previous post . Instead of backface-visibility: hidden; try opacity: 0.99; in interactions.css.
.front,
.back,
.left,
.right {
width: 100%;
height: 100%;
display:block;
position:absolute;
opacity: 0.99;
}
Daniel Tafvelin
4,833 PointsThe best way i managed to solve it was by doing the following:
.front, .back, .left, .right { width: 100%; height: 100%; display: block; position: absolute; }
I added the "transform-style: preserve-3d;" and "backface-visibility: hidden;" properties to the above CSS and that fixed it for me.
Steven Parker
231,269 PointsThose properties are both in the original code above.
Did you add them in different places than where they are shown here?
Daniel Tafvelin
4,833 PointsIf i remember correctly Guil adds those properties to the parent container. But I also added them to the code i posted above (making it ".front, .back, .left, .right { width: 100%; height: 100%; display: block; position: absolute; transform-style: preserve-3d; backface-visibility: hidden;}") and that solved the problem.
Steven Parker
231,269 PointsThe "preserve-3d" setting can go on the container, it doesn't need to be applied to each object inside it.
Daniel Tafvelin
4,833 PointsWell when I only had it in the container I got the same error that this thread has reported, and when I added it to the other object it fixed it. I tried all the other solutions mentioned in this thread and none of them worked except for the opacity-trick but as you said, that only conceals the real issue.
Cameron Cochran
Front End Web Development Techdegree Student 8,781 Points<p>/* =================================
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;
opacity: 0.99;
}
.front {
transform: translate3d(0,0, 110px);
}
.back {
transform: translateZ(-110px) rotateY(270deg);
transform-origin: center left;
}
.left {
transform: rotateY(-270deg) translate3d(110px, 0 0);
transform-origin: top right;
}
.right {
transform: translateZ(-110px) rotate(180deg);
}<p>
Cameron Cochran
Front End Web Development Techdegree Student 8,781 Points^^ I am sure there is a bug somewhere but I tried Steven's solution and it didn't work. (ignore the <p> elements at the start and finish...I misunderstood how to format the code when using this message board). The opacity hack did work for me...I'd love some explanation of what is going on. I am a little confused and I am really digging these concepts.
Steven Parker
231,269 PointsThose "<p>"'s are HTML code and don't being in the CSS flie. They also invalidate some of the CSS rules and cause them to be ignored.
Ryan Markey
Front End Web Development Techdegree Student 12,565 PointsRyan Markey
Front End Web Development Techdegree Student 12,565 PointsAdding:
transform-style: preserve-3d; backface-visibility: hidden;
to:
.front, .back, .left, .right {
Worked fine.