CSS3动画效果之照片墙

照片墙


	
    
    
    
    
    
    
    
    
    
      
    
    
    
    
    

position:absolute;
		top:180px;
		left:30px;@charset "utf-8";
/* CSS Document */
body{ background-color:#CCC;}
h1{ text-align:center;}
.container{ margin:0 auto; position:relative; 
			width:1000px;}
img{ background:#000;
		padding:5px;
		transition:all 0.35s;}
img:hover{ 
			transform:rotate(0deg);
			transform:scale(1.2,1.2);
			box-shadow:5px 5px;
			z-index:2;}
.pic1{ transform:rotate(-15deg);
		
		position:absolute;
		top:60px;
		left:10px;
		z-index:1;
		
		}

.pic2{ transform:rotate(-15deg);
		position:absolute;
		top:60px;
		left:180px;}

.pic3{ transform:rotate(15deg);
		position:absolute;
		top:60px;
		left:400px;
		z-index:1;}

.pic4{ transform:rotate(-20deg);
		position:absolute;
		top:60px;
		left:550px;}

.pic5{ transform:rotate(20deg);
		position:absolute;
		top:60px;
		left:750px;}

.pic6{ transform:rotate(15deg);
		position:absolute;
		top:300px;
		left:20px;
		z-index:1;}

.pic7{ transform:rotate(-15deg);
		
		position:absolute;
		top:300px;
		left:210px;}

.pic8{ transform:rotate(-20deg);
		position:absolute;
		top:300px;
		left:450px;
		z-index:1;}

.pic9{ transform:rotate(-20deg);
		position:absolute;
		top:300px;
		left:600px;}

.pic10{ transform:rotate(20deg);
		position:absolute;
		top:300px;
		left:800px;}

.pic11{ transform:rotate(-30deg);
		position:absolute;
		top:500px;
		left:20px;
		z-index:1;
		
		}

.pic12{ transform:rotate(15deg);
		position:absolute;
		top:500px;
		left:250px;}

.pic13{ transform:rotate(-30deg);
		position:absolute;
		top:550px;
		left:400px;
		z-index:1;}

.pic14{ transform:rotate(15deg);
		position:absolute;
		top:520px;
		left:650px;
}

.pic15{ transform:rotate(-20deg);
			position:absolute;
		top:580px;
		left:800px;}