<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>放大旋转动画DEMO演示</title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ /* background: url(../images/bodyBg.jpg) repeat; */ } .nav{ width: 90%; margin: 0 auto; margin-top: 100px; height: 255px; overflow: hidden; } .nav ul{ } .nav ul li{ position: relative; float: left; width: 210px; margin-top: 70px; height: 120px; text-align: center; list-style: none; margin-left: 20px; background: rgba(0, 0 ,0 ,0.5); } .nav ul li:before{ content: ""; width: 210px; height: 120px; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; transform: rotate(60deg); -webkit-transform: rotate(60deg); z-index:-1; } .nav ul li:after{ content: ""; width: 210px; height: 120px; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; transform: rotate(-60deg); -webkit-transform: rotate(-60deg); z-index:-1; } .nav ul li img{ transition: 1s; -webkit-transition: 1s; display: block; margin: 21px auto; z-index:2; } .nav ul li img:hover{ transform:rotate(360deg) acale(1.5); -webkit-transform:rotate(360deg) scale(1.5); -moz-transform:rotate(360deg) acale(1.5); -ms-transform:rotate(360deg) acale(1.5); } </style> </head> <body> <div class="nav"> <ul> <li><img src="images/1.png"/></li> <!-- <li><img src="images/2.png"/></li> <li><img src="images/3.png"/></li> <li><img src="images/4.png"/></li> <li><img src="images/5.png"/></li> --> </ul> </div> </body> </html>
鼠标移到中间图片会有放大旋转效果