用CSS3写一个旋转魔方相册

这个旋转的魔方相册，是使用transform的translate属性写出来。一共是一大一小两个正方形，废话不多说，看代码
HTML代码

	<!--最简单的代码呈现最炫丽的页面，请忽略我的类型，懒得起名字-->
	<div id="mf">
		<div class="mf_d1 d1_top"></div>
		<div class="mf_d1 d1_bottom"></div>
		<div class="mf_d1 d1_left"></div>
		<div class="mf_d1 d1_right"></div>
		<div class="mf_d1 d1_qian"></div>
		<div class="mf_d1 d1_hou"></div>

		<div class="mf_d2" id="d2_top"></div>
		<div class="mf_d2" id="d2_bottom"></div>
		<div class="mf_d2" id="d2_left"></div>
		<div class="mf_d2" id="d2_right"></div>
		<div class="mf_d2" id="d2_qian"></div>
		<div class="mf_d2" id="d2_hou"></div>
	</div>

css代码

	/*
		请自动忽略我的代码规范，这早期时候写的demo
	*/
	#mf{
		width:200px;
		height:200px;
		margin:200px auto;
		position:relative;
		transform-style:preserve-3d;
		perspective:100000px;
		animation:xuanzhuan 3s linear infinite;
		margin:20% auto;
	}
	.mf_d1{
		width:140px;
		height:140px;
		position:absolute;
		top:30px;
		left:30px;
	}
	.mf_d2{
		width:200px;
		height:200px;
		transition:all 1s linear;
		position:absolute;
	}


/*这个是里面的小正方形*/
	.d1_top{
		/*写颜色的*/
		background:red;
		/*加图片的*/
		background-image:  url(./) no-repeat center center;
		background-size: 100%;
		/*加图片的*/
		transform:translateY(-70px) rotateX(90deg);
	}
	.d1_bottom{
		background:blue;
		transform:translateY(70px) rotateX(90deg);

	}
	.d1_left{
		background:yellow;
		transform:translateX(-70px) rotateY(90deg);	
	}
	.d1_right{
		background:pink;
		transform:translateX(70px) rotateY(90deg);	
	}
	.d1_qian{
		background:green;
		transform:translateZ(-70px);	
	}
	.d1_hou{
		background:#000;
		transform:translateZ(70px);
	}
	/*这个是最外层的大正方形*/
	#d2_top{
		background:red;
		transform:translateY(-100px) rotateX(90deg);
		opacity:0.5;
	}
	#d2_bottom{
		background:blue;
		transform:translateY(100px) rotateX(90deg);
		opacity:0.5;
	}
	#d2_left{
		background:yellow;
		transform:translateX(-100px) rotateY(90deg);
		opacity:0.5;
	}
	#d2_right{
		background:pink;
		transform:translateX(100px) rotateY(-90deg);
		opacity:0.5;
	}
	#d2_qian{
		background:green;
		transform:translateZ(-100px);	
		opacity:0.5;
	}
	#d2_hou{
		background:#000;
		transform:translateZ(100px);
		opacity:0.5;
	}
	/*旋转动画效果*/
	@keyframes xuanzhuan{
		0%{
		transform:rotateY(0deg) rotateX(50deg) rotateZ(0deg);
	}
		100%{
		transform:rotateY(360deg) rotateX(50deg) rotateZ(0deg);
		}
	}
	/*添加移入移出事件*/
	div#mf:hover #d2_top{
			transform:translateY(-240px) rotateX(90deg) scale(1.8);
		}
		#mf:hover #d2_bottom{
			transform:translateY(240px) rotateX(90deg) scale(1.8);
		}
		#mf:hover #d2_left{
			transform:translateX(-240px) rotateY(90deg) scale(1.8);
		}
		#mf:hover #d2_right{
			transform:translateX(240px) rotateY(-90deg) scale(1.8);
		}
		#mf:hover #d2_qian{
			transform:translateZ(-240px) scale(1.8);
		}
		#mf:hover #d2_hou{
			transform:translateZ(240px) scale(1.8);
		}

下图就是页面上的是视觉了，可以根据需要把背景色替换成图片