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!

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 Kristian Woods
Kristian Woods
23,414 Points

Creating a flipping animation using 3d CSS animation

Hey, I'm trying to get an image to flip, using CSS. When the user hovers over the main image - (side-a) - the image is then supposed to flip 180deg and show an overlay - (side-b) - however, when hovered over, you can only see the the reverse of side-a.

I tried using backface-visibility: hidden and then flip side-b 180deg, so that it shows, but its still not working

Any ideas would be much appreciated

Thanks

<div class="photo-container">
                <div class="photo">
                  <img class="side-a" src="mengle-great-buddha-temple.jpg" alt="Planet Earth">  
                  <div class="photo-desc side-b">
                      <h3>Planet Earth</h3>
                        <a href="#" class="button">download</a>
                    </div>
                </div>
            </div>

.photo-desc {
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0; 
    left: 0;
    padding-left: 20px;
    padding-right: 20px;
    display: flex; /* For centering text inside .photo-overlay */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #345d88;
    line-height: 0;
}

.photo-container {
    perspective: 700px;
}

.photo {
    transition: transform 1s ease-in;
    transform-style: preserve-3d;
}

.photo:hover {
    transform: rotateY(180deg);
}

.side-a,
.side-b {
    backface-visibility: hidden;
}

.side-b {
    transform: rotateY(180deg);
}

2 Answers

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,302 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,302 Points

Hmmm your code seems to work for me... What browser are you using? Perhaps some things need a vendor prefix?

Here's a CodePen with your code and auto-prefixer turned on, and just using a placeholder image since I didn't have access to yours...

http://codepen.io/iainsimmons/pen/grexBe

Kristian Woods
Kristian Woods
23,414 Points
Kristian Woods
Kristian Woods
23,414 Points

Hey man, thanks for getting in touch. I had a look over the code again, and I found that a few elements were sharing the same class name, and that I used that class name for a different purpose. So it created the issue I had. I sorted the issue out by assigning new class names :)

Thanks again, Iain