<!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>D转换-4</title> <style> * { margin: 0; padding: 0; } ul { margin: 100px; } ul li { width: 120px; height: 35px; /* 去掉 li 的小点 */ list-style: none; border-radius: 5px; float: left; margin: 0 5px; /* 注意加在这里，方便 */ perspective: 400px; } .box { height: 100%; width: 100%; position: relative; transform-style: preserve-3d; } .box:hover { transform: rotateX(90deg); transition: all 1s; } .front, .bottom { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 35px; text-align: center; color: #fff; } .front { background-color: pink; z-index: 1; transform: translateZ(17.5px); } .bottom { background-color: purple; /* 必须先写移动 */ transform: translateY(17.5px) rotateX(-90deg); } </style> </head> <body> <!-- ul>li --> <ul> <li> <!-- .box>.font+.bottom --> <div class="box"> <div class="front">上面</div> <div class="bottom">下面</div> </div> </li> <li> <!-- .box>.font+.bottom --> <div class="box"> <div class="front">上面</div> <div class="bottom">下面</div> </div> </li> <li> <!-- .box>.font+.bottom --> <div class="box"> <div class="front">上面</div> <div class="bottom">下面</div> </div> </li> <li> <!-- .box>.font+.bottom --> <div class="box"> <div class="front">上面</div> <div class="bottom">下面</div> </div> </li> <li> <!-- .box>.font+.bottom --> <div class="box"> <div class="front">上面</div> <div class="bottom">下面</div> </div> </li> </ul> </body> </html>