<!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转换-3</title> <style> body { perspective: 400px; } .box { position: relative; border: 1px solid #eee; height: 300px; width: 300px; margin: 100px auto; transition: all .4s; transform-style: preserve-3d; } .box:hover { transform: rotateY(180deg); } .box div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; font-size: 30px; color: #fff; text-align: center; line-height: 300px; } .front { background-color: pink; } .back { background-color: purple; /* 像手机背靠背 */ transform: rotateY(180deg); } </style> </head> <body> <div class="box"> <!-- .font+.back --> <div class="front">前面</div> <div class="back">后面</div> </div> </body> </html>