3D Image Layer Flip code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D Image Layer Flip</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="box"></div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: url(666.jpg); } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; height: 300px; background: url(777.jpg); background-size: cover; } .box::before, .box::after { content: ''; position: absolute; left: 0; width: 100%; height: 50%; background: url(777.jpg); background-size: cover; filter: grayscale(100%); transition: 1s; } .box::before { top: 0; transform-origin: top; transform: perspective(500px) rotate(0deg); background-position: 0 0; } .box::after { bottom: 0; transform-origin: bottom; transform: perspective(500px) rotate(0deg); background-position: 0 100%; } .box:hover::before { transform: perspective(500px) rotateX(270deg); } .box:hover::after { transform: perspective(500px) rotateX(-270deg); }
