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 trialPhilip Smith
Front End Web Development Techdegree Graduate 17,622 PointsCannot get -side-b to show once rotated.
I had some trouble getting backface-visibility to show at first. I changed the code from just .photo and .photo:hover to .photo img and .photo:hover img. That got the backface-visibility to work. The problem now is that I cannot see side-b at all.
Currently this is my code:
.photo img { transition: transform 1s cubic-bezier(.55, -.62, .27, 1.2); transform-style: preserve-3d; }
.photo:hover img { transform: rotateY(-180deg); }
.side-a, .side-b { backface-visibility: hidden; }
.side-b { transform: rotateY(180deg); }
8 Answers
Philip Smith
Front End Web Development Techdegree Graduate 17,622 PointsFigured it out! The z-index has to be at 100. Crazy that the z-index doesn't work at 1 but it works at 100. Thats the fix!
Philip Smith
Front End Web Development Techdegree Graduate 17,622 PointsThe html I am using is the html Guil provided in the workspace above. I am just running this in VSCode.
Yes, That is currently what I have going on in that both the img and the div with class side-b that contains the description and download button are rotating together and I cannot see their backside as it is hidden. Which is exactly what I want. The problem comes when I want side-b to rotate and show me its face while the img is showing its backside. They arent working in tandem like Guil gets them to when I code along with him.
Trying to figure out how to get them to work the way he has them rotating because with his code I am not achieving the desired result.
Steven Parker
231,186 PointsThe "tandem" operation is done by having both images inside a shared container, with one of them pre-rotated. Then on hover, it is the container and not the images themselves that gets rotated. That way they both change by 180 degrees where without the container the visible one rotates 180 degrees (to become hidden) and the hidden one rotates 360 degrees and stays hidden.
If you still have trouble, you might consider moving the project into a workspace so that you can make a snapshot and post the link to it here.
Philip Smith
Front End Web Development Techdegree Graduate 17,622 PointsHey Steven, that makes complete sense to me. Im just not getting the tandem effect when I write it out the way its done in the video. When coded that way I just get the photo to rotate and backface-visibility doesn't even work for me.
This is my workspace coded just like Guil instructs: https://w.trhou.se/kuvnyoy3lw
Here is my workspace when I up the specificty to get the effects right up until the final rotation and lose the tandem effect: https://w.trhou.se/bv04dgzdbc
Philip Smith
Front End Web Development Techdegree Graduate 17,622 PointsUsing Z-index on .side-b is what fixed it for me. When I copied the code you put in earlier I was still running into the same issues are before with the backface-visibility. I also removed the specificity and got everything back to just the .photo div. Im not sure why Z-index fixed it but it fixed it for me.
Steven Parker
231,186 PointsI haven't seen just how you've used the index but It's certainly an unconventional and potentially brittle solution. Z-index is a 2-D concept but these are 3-D transforms. Guil's solution and mine both create a virtual model of physical objects as they might be organized and moved.
Patricia Jackson
Front End Web Development Techdegree Student 9,165 PointsI'm having the same issue with this code except, when I change the backface-visibility to visible, when it rotates, I can see the backside of the photo. Otherwise, when it's hidden, I see the front side through the back side. Nothing is hidden.
Steven Parker
231,186 PointsStart a fresh question, provide a link to the page, and make a snapshot of your workspace and post the link to it in your question.
Steven Parker
231,186 PointsWithout seeing the HTML this is just a guess, but if the class "side-b" is applied to the IMG element directly, then hovering over the container would cause it to flip from 180 degrees around to -180 degrees, and both would be exposing the back face (which is hidden).
I'd further guess that you want hovering to rotate a container of the images rather than the images themselves.
Steven Parker
231,186 PointsUsing your 2nd workspace, it worked as expected after changing the hover dynamics to apply to the container (".photo") instead of the images:
/* =================================
Photo 3D Transforms & Transitions
==================================== */
.content {
perspective: 700px;
}
/* original:
.photo img, .photo .side-b { */
.photo {
transition: transform 1s ease-out;
transform-style: preserve-3d;
}
/* original:
.photo:hover img, .photo:hover .side-b { */
.photo:hover {
transform: rotateY(-180deg);
}
.side-a, .side-b {
backface-visibility: hidden;
}
.side-b {
transform: rotateY(180deg);
}
Daniel Telders
Front End Web Development Techdegree Student 8,024 PointsUsing the code as Guil writes it, I find it works on Firefox, but not in Chrome.
Steven Parker
231,186 PointsI only use Chrome and had no problems.
JARRMO VARUSON
5,846 Pointssame problem.. followed Guil step-by-step, but its not working
Steven Parker
231,186 PointsSteven Parker
231,186 PointsI'm not sure how you're using Z-index, but that's not the fix I was suggesting. See the comment I added to my answer.
coco coco
Front End Web Development Techdegree Student 184 Pointscoco coco
Front End Web Development Techdegree Student 184 Pointsit's bcuz img has z-index: 100 in main.css so we have to make side-b z-index > 100
Steven Parker
231,186 PointsSteven Parker
231,186 PointsThe technique in this video does not use (or need) z-index when properly done.