旋转盒子

旋转盒子

旋转盒子这一个小功能结合了动画的过渡，变换以及关键帧动画，效果是盒子随意随着X轴，Y轴，Z轴移动，鼠标悬浮上去，盒子会撑大。

先上HTML代码布局演示：

<div class="wapper">
		<div class="cube">
			 <!-- 正面 -->
		     <span class="num_zheng">
		     	 
		     </span>
		     <!-- 反面 -->
		     <span class="num_fan">
		     	
		     </span>
		     <!-- 左面 -->
		     <span class="num_left">
		       
		     </span>
		       <!-- 右面 -->
		     <span class="num_right">
		     	
		     </span>
		       <!-- 上面 -->
		     <span class="num_top">
		     	
		     </span>	
		       <!-- 下面 -->
		     <span class="num_bottom">
		     	
		     </span>		
		</div>
	</div>

因为盒子有六面，然后给每个面设置背景图片，再通过设置效果让其运动起来，接下来演示css3代码：
先给盒子做个基本的样式添加背景图片，让其在页面正中位置定住

	*{
			padding: 0;
			margin: 0;
		}
		html{
			height: 100%;
			background-image: linear-gradient(#29f9f0 0% , #000 80%);
		}
		.wapper{
			width: 300px;
			margin-top: 100px;
			perspective: 800px;
			margin: 50px auto;
		}
		span img{
			width: 90px;
			height: 90px;
			

		}
		.cube span.num_zheng{
        	transform: translateZ(50px);
        	background-image: url(img/itme1.jpg);
        	background-size: auto 100%;
        }
        .cube span.num_fan{
        	transform: translateZ(-50px);
        	background-image: url(img/itme2.jpg);
        	background-size: auto 100%;
        }
        .cube span.num_left{
        	transform: translateX(-50px) rotateY(90deg);
        	background-image: url(img/itme3.jpg);
        	background-size: auto 100%;
        }
        .cube span.num_right{
        	transform: translateX(50px) rotateY(-90deg);
        	background-image: url(img/itme4.jpg);
        	background-size: auto 100%;
        }
        .cube span.num_top{
        	transform: translateY(-50px) rotateX(90deg);
        	background-image: url(img/itme5.jpg);
        	background-size: auto 100%;
        }
        .cube span.num_bottom{
        	transform: translateY(50px) rotateX(-90deg);
        	background-image: url(img/itme6.jpg);
        	background-size: auto 100%;
        }

设置完后，再让这个盒子运动起来

.wapper .cube{
			width: 300px;
			height: 300px;
	        transform-style: preserve-3d;
	        position: relative;
	        transform: rotateX(-50deg) rotateY(-50deg) rotate(-50deg);
	        animation: xuan 10s infinite;
		}
		.wapper .cube span{
			transition: all 1s cubic-bezier(0.9,-0.2,1,1);
		}
		.cube>span{
			display: block;
			width: 90px;
			height: 90px;
			position: absolute;
			left: 50px;
			top: 50px;
			opacity: 0.8;
			background-color: rgba(0,100,120,1);
			/*backface-visibility: hidden;*/

		}
		@keyframes xuan{
			0%{
                transform: rotateX(0deg) rotateY(0deg) rotate(0deg);
			}
			100%{
                transform: rotateX(720deg) rotateY(360deg) rotate(360deg);
			}
		}

最后就只剩下，鼠标悬浮效果了

.wapper .cube:hover .num_zheng{
        	
        	transform: translateZ(100px) scale(1.5);
        }
        .wapper .cube:hover .num_fan{
        	
        	transform: translateZ(-100px) scale(1.5);
        }
        .wapper .cube:hover .num_left{
        	
        	transform: translateX(-100px) rotateY(90deg) scale(1.5);
        }
        .wapper .cube:hover .num_right{
        	
        	transform: translateX(100px) rotateY(-90deg) scale(1.5);
        }
        .wapper .cube:hover .num_top{
        	
        	transform: translateY(-100px) rotateX(90deg) scale(1.5);
        }
        .wapper .cube:hover .num_bottom{
        	
        	transform: translateY(100px) rotateX(-90deg) scale(1.5);
        }

效果演示