<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { perspective: 500px; } .q { position: relative; margin: 100px auto; width: 200px; height: 300px; transition: all 10s; transform-style: preserve-3d; } .q:hover { transform: rotateY(360deg); } .q div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: pink; } .q div:nth-child(2) { position: absolute; top: 0; left: 0; background-color: #1ba1e6; transform: rotateX(30deg); } .q div:nth-child(3) { position: absolute; top: 0; left: 0; background-color: #40b83f; transform: rotateX(-30deg); } </style> </head> <body> <div class="q"> <div></div> <div></div> <div></div> </div> </body> </html>