* { margin:0px; padding:0px; } body { background:url("images/bodyBg.jpg"); } #nav { width:980px; height:350px; margin:50px auto; } #nav ul li { list-style:none; background:rgba(0,0,0,.5); height:105px; width:180px; float:left; margin:30px 5px; position:relative; } #nav ul li:before { content:""; height:105px; width:180px; background:rgba(0,0,0,.5); position:absolute; top:0px; left:0px; transform:rotate(60deg); -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); } #nav ul li:after { content:""; height:105px; width:180px; background:rgba(0,0,0,.5); position:absolute; top:0px; left:0px; z-index:1; transform:rotate(-60deg); -webkit-transform:rotate(-60deg); -moz-transform:rotate(-60deg); } #nav ul li.mar { margin-left:100px; } #nav ul li img { width:80px; height:80px; top:0px; left:0px; right:0px; bottom:0px; margin:auto; z-index:2; position:absolute; transition:1s; -webkit-transition:1s; -moz-transition:1s; } #nav ul li img:hover { -webkit-transform:rotate(360deg) scale(1.5); -moz-transform:rotate(360deg) scale(1.5); -ms-transform:rotate(360deg) scale(1.5); -o-transform:rotate(360deg) scale(1.5); }
纯css3实现的动态旋转相册效果,欢迎来搞