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

Nick East
Nick East
7,671 Points
Posted by Nick East
Nick East
7,671 Points

Flipping Animation is reversed

I'm trying to recreate what Guil does in the video but my overlay layer is position on-top of my image rather than the reverse.

Nick East
Nick East
7,671 Points
Nick East
Nick East
7,671 Points 
 <div class="rotate">
                    <div class="img-wrapper side-a">
                        <img src="forest%20copy.jpg">
                    </div>
                    <div class="side-b">
                            <h3>Overlay</h3>
                            <p>sometextsometextsometext</p>
                            <button class="btn">Download</button>
                    </div>

            </div>           

.rotate {
    width: 60%;
    margin: 5% 20%;
    position: relative;
    transition: transform 1s ease-out;
    transform-style: preserve-3d;
    perspective: 700px;
}

.rotate:hover {
    transform: rotateY(-180deg);

}


.side-a,
{
    backface-visibility: visible;

}



.side-b {
    position: absolute;
    top: 0; 
    width: 100%;
    height: 100%;
    padding-top: 5em;
    background-color: lightcoral;
    color: white;
    backface-visibility: hidden;

}

1 Answer

Steven Parker
Steven Parker
231,186 Points
Steven Parker
Steven Parker
231,186 Points

Try adding these properties:

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

.side-b {
  transform: rotateY(-180deg);
}
Nick East
Nick East
7,671 Points
Nick East
Nick East
7,671 Points

Thanks Steven, you're the man!