* {
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实现的动态旋转相册效果,欢迎来搞