<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title></title><style>body{margin: 0;}.box{margin: 200px auto;position: relative;width: 250px;perspective:800px;transform-style: preserve-3d;}.front{position: relative;text-align: center;line-height:200px ;width: 250px;height: 200px;background-color: red;border-radius: 5px;z-index: 1;transition: all 2s;}.back{position: absolute;top: 0;left: 0;text-align: center;line-height:200px ;width: 250px;height: 200px;background-color: blue;border-radius: 5px;transform: rotateY(180deg);transition: all 2s;z-index:0;}.box:hover .front{transform: rotateY(-180deg);/* z-index: 1; */}.box:hover .back{transform: rotateY(0deg);}</style></head><body><div class="box"><div class="front">前面</div><div class="back">后面</div></div></body></html>