// 设置景深
perspective: 10000px;
/* 设置观看位置 */
perspective-origin: 50% 50%;

/* 2. 为立方体添加3d效果 */
.wrap .cube {
	/* 4、爸爸加3d,因为最后旋转的是爸爸 */
	transform-style: preserve-3d;
	animation: box 10s linear infinite;
	/* 5、在chrome开发者工具调试旋转父级查看效果 */
	transform: rotateX(0deg) rotateY(0deg);

}

.wrap .cube:hover .front {
	background-image: url(img/1.jpg);
	transform: translateZ(200px);
}