CSS CSS Transitions and Transforms Adding 3D Effects with CSS Create a Flipping Animation with 3D Transform Properties

Nick East
Nick East
7,422 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,422 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
163,747 Points

Try adding these properties:

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

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

Thanks Steven, you're the man!