大佬教程收集整理的这篇文章主要介绍了html5 css练习 画廊 元素旋转，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!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.2) url(imges/hl.jpg) no-repeat; BACkground-size: cover; padding: 20px; margin-left: auto; margin-right: auto;}
以上是大佬教程为你收集整理的html5 css练习 画廊 元素旋转全部内容，希望文章能够帮你解决html5 css练习 画廊 元素旋转所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。