<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D转换-2</title> <style> /* 移动： transform: translate3d(x, y, z); 旋转： rotate3d(0/1, 0/1, 0/1, dmesg); 透视： perspective: px; 呈现： transform-style: flat/preserve-3d; */ body { perspective: 500px; } .box { position: relative; width: 200px; height: 200px; margin: 100px auto; transition: all 3s; /* 子元素开启立体空间 */ transform-style: preserve-3d; } .box:hover { transform: rotateY(180deg); } .box div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: tomato; } .box div:last-child { background-color: purple; transform: rotateX(60deg); } </style> </head> <body> <div class="box"> <div></div> <div></div> </div> </body> </html>