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

Posted by Sam Koster
Sam Koster
3,982 Points

3D flip transform disappears/not working

I'm trying to rotate a few images along the Y axis using 3D transform so that when they flip over, the div underneath appears as if it was attached to the back of the image.

I'm nearly there, but my images disappear when they rotate past 180deg at the moment.

Here's my Codepen link:

http://codepen.io/skoster7/pen/KgwXgB

3 Answers

Alex Watts
Alex Watts
8,396 Points
Alex Watts
Alex Watts
8,396 Points

Hello Sam,

I hope this helps http://codepen.io/AlexanderWatts/pen/RGNqbj. I had removed the class sideb. I was confused by what it was meant to do?

Alex Watts
Alex Watts
8,396 Points
Alex Watts
Alex Watts
8,396 Points

Hello,

I now understand what sideb does. This is the solution http://codepen.io/AlexanderWatts/pen/xEbQkR!

Hope this is what you wanted :)

Sam Koster
Sam Koster
3,982 Points

Hi Alex,

That's almost right - but I wanted 'sideb' or the back with the writing on to appear as if it was attached to the front image - like this http://codepen.io/skoster7/pen/kkYEJk

I have nearly got it in the above codepen link - I just can't find a way of hiding the text when the image is stationary

Alex Watts
Alex Watts
8,396 Points
Alex Watts
Alex Watts
8,396 Points

I see, perhaps your better off doing this is JavaScript or jQuery.