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

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points
Posted by karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

Having a weird issue with ,side-a and ,side-b

If I apply .side-a{ backface-visibilty: hidden} then the whole code is working but If I put .side-a, .side-b{ backface-visibility:hidden; } It's again showing me the back side of the image Here is the snapshot https://w.trhou.se/1q6qr0u9wu and as in the video it worked out everything for Guil but for me I had to give .photo-container, .photo{ transform-style: preserve-3d; } otherwise it was not working at all

1 Answer

Jason Larson
Jason Larson
8,361 Points

I don't know enough about transitions and transformations to be able to tell you exactly why it's happening, but I can tell you that it's working, but you can't see that it's working correctly because you turned off the transform for side-b that flips it around. If you take off the definition on .photo-container and leave everything else the way you have it, when you hover over the photo, you are actually seeing the backside of side-a because the backside of side-b is hidden. This may or may not be working correctly, as I'm not sure what's supposed to happen when the backside is hidden on 2 photos that are stacked on top of each other with the backsides of each facing you. When you only have it as .side-a {backface-visibility:hidden;}, when it flips around, you are seeing the backside of side-b (that's why the text looks backwards). When you add the transform: rotateY back to .side-b, when it flips around, you see the front of side-b, and the 2 photos have their backsides pressed together.