The **flip animation** is one of several styling options that CSS provides. 

The example below contains the HTML and CSS codes used​ to add the flip animation to images:

/* set perspective on the outer container */
.flip-container {
	perspective: 1000px;
}
/* flip the inner container when hovering over the outer one */
.flip-container:hover .flipper {
	transform: rotateY(180deg);
}

/* set the back of images to be hidden during the flip*/
.front, .back {
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	position: absolute;
}

/* flip speed and 3D styling goes here */
.flipper {
	width: 100%;
	height: 100%;
	transition: 0.7s;
	transform-style: preserve-3d;
	position: relative;
}

.back {
  transform: rotateY(180deg);
}



<html>
 <head>
 </head>
 <body>
    <h1> Hover over the puppy to flip it </h1>
    <div class="flip-container">
        <div class="flipper">
            <div class="front">
            
                <img 
                    src="https://rlv.zcache.co.nz/rottweiler_puppy_square_sticker-r6280b5b1fbeb45769766220bdd742b9f_0ugmc_8byvr_540.jpg" 
                    alt="Puppy 1" 
                    style="width:400px; height:400px;"
                >
            </div>
            <div class="back">
                
                <img 
                    src="https://rlv.zcache.com/golden_retriever_puppy_square_sticker-r278a6576ab3a480cb1140b27ac4712d0_0ugmc_8byvr_540.jpg"
                    alt="Puppy 2" 
                    style="width:400px; height:400px;"
                >
            </div>
        </div>
    </div>
</body>
</html>

codemirror

# Explanation
- In the HTML code, the outermost container (`flip-container`) is only used to set the animation area's *perspective*; this specifies the space that the entire animation will use during the 3D flip effect.
- The `flipper` div is the container that actually flips between the `front` and `back` divs.
- In the CSS file, on *line 6*, the `flipper` container is set to "rotate" when the mouse hovers over the `flip-container` div.
- On *line 14* in the CSS file, the property `backface-visibility` is set to "hidden" so that the back of the images do not appear during the flipping animation.
- The settings for the animation, such as the flip speed and the 3D effect, are done on *lines 19 -- 24*.

How to create a flip animation in CSS

Explanation