html5+css3实现2D动画效果演示

这些代码主要实现的功能就是一些2D的动画效果，如平移动画，旋转动画等等。

HTML5代码：

	 
    
	



	

    	
    	

        	
平移动画
            
图片描述
            
图片描述
            
图片描述
        
    
    
    

    	
    	

        	
旋转动画
            
图片描述
			

        
    
    
    

    	
    	

        	
斜切动画
            
图片描述
            
图片描述
            
图片描述
        
    
    
    

    	
    	

        	
缩放动画
            

        
    

CSS3代码：

@charset "utf-8";
*{margin:0px;padding:0px;}
figure{position:relative;width:33.33%;height:350px;overflow:hidden;float:left;}
figcaption{position:absolute;top:0px;left:0px;color:#FFF;font-family:"微软雅黑";margin:5px 10px;}

@media screen and (max-width:600px){
	figyre{width:100%}
}
@media screen and (min-width:601px) and (max-width:1000px){
	figure{width:50%}
}
@media screen and (min-width:1001px){
	figure{width:33.33%}
}

figure figcaption p,h2,div{transition:all 0.35s;}
figure img{transition:all 0.35s;opacity:0.8;}
.test1{background:#2f0000;}
.test1 figcaption p{background:#fff;color:#333;margin:5px;text-align:center;transform:translate(-130px,0px);}
.test1 figcaption{padding:20px;}
.test1:hover figcaption p{transform:translate(0px,0px);}
.test1 figcaption p:nth-of-type(1){ transition-delay:0.05s;}
.test1 figcaption p:nth-of-type(2){ transition-delay:0.1s;}
.test1 figcaption p:nth-of-type(3){ transition-delay:0.15s;}
.test1:hover img{transform: translate(-50px,0); opacity:0.5;}

.test2{background:#030;}
.test2 figcaption{width:100%;height:100%;}
.test2 figcaption h2{margin-left:15%;margin-top:15%;}
.test2 figcaption p{margin-left:15%; transform:translate(0px,50px);opacity:0;}
.test2 figcaption div{border:2px solid #FFF;width:80%;height:80%;position:absolute;top:10%;left:10%;transform:translate(0px,-350px) rotate(0deg);}
.test2:hover figcaption div{transform:translate(0px,0px) rotate(360deg);}
.test2:hover img{opacity:0.5;transform:translate(-50px,0px);}
.test2:hover figcaption p{transform:translate(0px,0px);opacity:1;}

.test3{background:#F30;}
.test3 figcaption{top:30%;left:15%;}
.test3 figcaption p{ transform:skew(90deg);}
.test3 figcaption h2{ transform:skew(0deg);}
.test3:hover figcaption p{ transform:skew(0deg); transition-delay:0.1s;}
.test3:hover figcaption h2{ transform:skew(90deg);}
.test3:hover img{opacity:0.5; transform:translate(-50px,0px);}

.test4{background:#030;}
.test4 figcaption{width:100%;height:100%;}
.test4 figcaption div{width:80%;height:80%;border:2px solid #fff;position:absolute;top:8%;left:8%;opacity:0;}
.test4 figcaption h2{margin-top:20%;margin-left:15%;opacity:1;}
.test4:hover figcaption div{ transform:scale(1.2,1.2);opacity:1;}
.test4:hover img{ transform:scale(1.2,1.2);opacity:0.5;}
.test4:hover figcaption h2{ transform:scale(1.2,1.2);opacity:0.5;}