css3实现盒子旋转打开的3d动画

先来记忆一下动画相关的知识

            animation 动画 帧数 1秒 60副画面
                    animation-name 动画名称 见名知意
                    animation-duration 动画时间 
                    animation-delay 动画延迟时间

                    animation-timing-function 动画速率变化
                        ease 慢快慢
                        ease-in 慢入
                        ease-out 慢出
                        ease-in-out 慢入慢出
                        linear 匀速的
                        cubic-bezier(.36,1.54,.67,1.47)

                    
                    animation-iteration-count  动画次数
                        number 123455
                        infinite 无限次
                    
                    animation-direction 动画的方向
                        normal 
                        alternate 先正向 再反向 需要两次 运动
                        reverse 反向 
                        alternate-reverse 先反向 再正向
                    

                    animation-fill-mode 决定动画起始结束状态 
                        none 原始状态 => 动画开始 => 原始状态
                        forwards 原始状态 => 动画开始 => 动画帧的100%
                        backwards 动画帧0%开始 =>动画开始 => 原始状态处
                        both 动画帧0%开始 =>动画开始 => 动画帧的100%
                        
                    animation-play-state  决定动画运行与暂停
                        running运行
                        paused 暂停

                    @keyframes run{
                        from{width:50px;}
                        to{width:800px;}
                    }

效果图

代码如下

	
		
		
		
		
		
		
		
	
	
		

			
前
			
后
			
左
			
右
			
上
			
下