Html及CSS实现旋转效果
<!DOCTYPE html><html><head><meta charset="utf-8"><title>旋转</title><style type="text/css">.box{margin:200px auto;width: 500px;position: relative;transition: all 2s linear;transform-style: preserve-3d;perspective: 1000px;}.box:hover{transform: rotateY(180deg);}.text1,.text2{position: absolute;top:0px;left: 0px;width: 500px;height: 500px;border-radius: 50%;text-align: center;line-height: 500px;font-size: 60px;}.text1{z-index: 1;background-color: blue;}.text2{background-color: red;transform: rotateY(180deg);}</style></head><body><form><div class="box"><div class="text1">无奋斗</div><div class="text2">不青春</div></div></form></body></html>
鼠标触及盒子，盒子自行旋转。
