<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>旋转菜单</title> <link rel="stylesheet" href="style6.css" type="text/css"></head><body><div> <ul> <li><a href="#"><img src="imges/gh1.jpg"></a></li> <li><a href="#"><img src="imges/gh2.jpg"></a></li> <li><a href="#"><img src="imges/gh3.jpg"></a></li> <li><a href="#"><img src="imges/gh4.jpg"></a></li> <li><a href="#"><img src="imges/gh5.jpg"></a></li> <li><a href="#"><img src="imges/gh1.jpg"></a></li> <li><a href="#"><img src="imges/gh2.jpg"></a></li> <li><a href="#"><img src="imges/gh3.jpg"></a></li> <li><a href="#"><img src="imges/gh4.jpg"></a></li> <li><a href="#"><img src="imges/gh5.jpg"></a></li> <li><a href="#"><img src="imges/gh1.jpg"></a></li> <li><a href="#"><img src="imges/gh2.jpg"></a></li> <li><a href="#"><img src="imges/gh3.jpg"></a></li> <li><a href="#"><img src="imges/gh4.jpg"></a></li> <li><a href="#"><img src="imges/gh5.jpg"></a></li> </ul> </div></body></html>
img{
width: 50px; height: 150px; border: groove orange; }ul{ margin-top: 150px; list-style-type: none;}li{ float: left; transform-origin: left top; transform: rotate(10deg); transition: all 1s ease;}li:nth-child(2n){ transform: rotate(15deg);}li:nth-child(3n){ transform: rotate(-25deg);}li:nth-child(4n){ transform: rotate(30deg);}li:nth-child(5n){ transform: rotate(-20deg);}li:hover{ position: relative; z-index: 200; transform: rotate(0deg) scale(3);}div{ width: 800px; height: 600px; background: rgba(0,0,0,0.2) url(imges/hl.jpg) no-repeat; background-size: cover; padding: 20px; margin-left: auto; margin-right: auto;}