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 Create a Flipping Animation with 3D Transform Properties

Philip Smith
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Philip Smith
Front End Web Development Techdegree Graduate 17,622 Points
Posted by Philip Smith
.a{fill-rule:evenodd;}techdegree seal-36
Philip Smith
Front End Web Development Techdegree Graduate 17,622 Points

Cannot 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

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

I'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
.a{fill-rule:evenodd;}techdegree
coco coco
Front End Web Development Techdegree Student 184 Points

it's bcuz img has z-index: 100 in main.css so we have to make side-b z-index > 100

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

The technique in this video does not use (or need) z-index when properly done.

Philip Smith
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Philip Smith
Front End Web Development Techdegree Graduate 17,622 Points
Philip Smith
.a{fill-rule:evenodd;}techdegree seal-36
Philip Smith
Front End Web Development Techdegree Graduate 17,622 Points

The 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
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

The "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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Philip Smith
Front End Web Development Techdegree Graduate 17,622 Points
Philip Smith
.a{fill-rule:evenodd;}techdegree seal-36
Philip Smith
Front End Web Development Techdegree Graduate 17,622 Points

Hey 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Philip Smith
Front End Web Development Techdegree Graduate 17,622 Points
Philip Smith
.a{fill-rule:evenodd;}techdegree seal-36
Philip Smith
Front End Web Development Techdegree Graduate 17,622 Points

Using 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
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

I 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Patricia Jackson
Front End Web Development Techdegree Student 9,165 Points
Patricia Jackson
.a{fill-rule:evenodd;}techdegree
Patricia Jackson
Front End Web Development Techdegree Student 9,165 Points

I'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
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Start 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
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Without 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
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Using your 2nd workspace, it worked as expected after changing the hover dynamics to apply to the container (".photo") instead of the images:

interactions.css 
/* ================================= 
  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);
}
Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

I only use Chrome and had no problems.

JARRMO VARUSON
JARRMO VARUSON
5,846 Points
JARRMO VARUSON
JARRMO VARUSON
5,846 Points

https://w.trhou.se/gapnn0050o

same problem.. followed Guil step-by-step, but its not working