一款纯css相册预览特效

首先引用css

<link href="css/main.css" rel="stylesheet" type="text/css"/>
<link href="css/sim-prev-anim.css" rel="stylesheet" type="text/css" />

分成九个部分，给你九种不同的效果。

.sim-anim-3:hover img:nth-child(1){
    -ms-transform: translate(40%,80%) rotate(-40deg); 
   	-webkit-transform: translate(40%,80%) rotate(-40deg); 
    transform: translate(40%,80%) rotate(-40deg); 
	}
.sim-anim-3:hover img:nth-child(2){
    -ms-transform: translate(30%,60%)  rotate(-30deg);
   	-webkit-transform: translate(30%,60%)  rotate(-30deg);
    transform: translate(30%,60%)  rotate(-30deg);
	}	
.sim-anim-3:hover img:nth-child(3){
    -ms-transform: translate(20%,40%) rotate(-20deg); 
   	-webkit-transform: translate(20%,40%)  rotate(-20deg); 
    transform: translate(20%,40%)  rotate(-20deg);
	}		
.sim-anim-3:hover img:nth-child(4){
    -ms-transform: translate(10%,20%) rotate(-10deg); 
   	-webkit-transform: translate(10%,20%)  rotate(-10deg); 
    transform: translate(10%,20%)  rotate(-10deg);
	}
.sim-anim-3:hover img:nth-child(5){
    -ms-transform: translate(40%,-80%) rotate(40deg); 
   	-webkit-transform: translate(40%,-80%) rotate(40deg); 
    transform: translate(40%,-80%) rotate(40deg); 
	}
.sim-anim-3:hover img:nth-child(6){
    -ms-transform: translate(30%,-60%)  rotate(30deg);
   	-webkit-transform: translate(30%,-60%)  rotate(30deg);
    transform: translate(30%,-60%)  rotate(30deg);
	}	
.sim-anim-3:hover img:nth-child(7){
    -ms-transform: translate(20%,-40%) rotate(20deg); 
   	-webkit-transform: translate(20%,-40%)  rotate(20deg); 
    transform: translate(20%,-40%)  rotate(20deg);
	}		
.sim-anim-3:hover img:nth-child(8){
    -ms-transform: translate(10%,-20%) rotate(10deg); 
   	-webkit-transform: translate(10%,-20%)  rotate(10deg); 
    transform: translate(10%,-20%)  rotate(10deg);
	}	
.sim-anim-3:hover img:nth-child(9){
  	-ms-transform: scale(1.1,1.1) ; 
    -webkit-transform: scale(1.1,1.1) ; 
    transform: scale(1.1,1.1) ;
	}