3D Flip Animation code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D Flip Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"> <div class="front"> <img src="image1.jpg"> </div> <div class="back"> <img src="image3.jpg"> </div> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: yellowgreen; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 300px; height: 190px; } .box img { width: 100%; } .box .front, .box .back { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: 2s; backface-visibility: hidden; border: 5px solid white; border-radius: 5px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); } .box .front { transform: perspective(1000px) rotateY(0deg); z-index: 2; } .box .back { transform: perspective(1000px) rotateY(180deg); z-index: 1; } .box:hover .front { transform: perspective(1000px) rotateY(-180deg); z-index: 2; } .box:hover .back { transform: perspective(1000px) rotateY(0deg); z-index: 1; }
