.wrap {
	width: 10px;
	height: 10px;
	margin: 200px 400px; /* 设置容器的外边距为垂直方向上200像素，水平方向上400像素 */
	position: relative; /* 设置容器的定位方式为相对定位 */
}

/* 定义立方体的样式 */
.cube {
	width: 600px;
	height: 400px;
	margin: 0 auto; /* 设置立方体水平居中 */
	transform-style: preserve-3d; /* 设置3D变换的保留方式 */
	transform: rotateX(-30deg) rotateY(-80deg); /* 设置立方体的初始旋转角度 */
	-webkit-animation: rotate 20s infinite; /* 设置立方体的旋转动画 */
	animation-timing-function: linear; /* 设置动画的时间函数为线性 */
}

/* 设置立方体的旋转动画 */
@-webkit-keyframes rotate {
	from {
		transform: rotateX(0deg) rotateY(0deg);
	}
	to {
		transform: rotateX(360deg) rotateY(360deg);
	}
}

/* 定义立方体的每个面的样式 */
.cube div {
	position: absolute;
	width: 300px;
	height: 300px;
	opacity: 0.8;
	transition: all .4s; /* 设置过渡效果的持续时间为0.4秒 */
}

/* 定义立方体中图片的样式 */
.pic {
	width: 300px;
	height: 300px;
}

/* 设置立方体各个面的位置和旋转角度 */
.cube .out_front {
	transform: rotateY(0deg) translateZ(150px);
}
.cube .out_back {
	transform: translateZ(-150px) rotateY(180deg);
}
.cube .out_left {
	transform: rotateY(90deg) translateZ(150px);
}
.cube .out_right {
	transform: rotateY(-90deg) translateZ(150px);
}
.cube .out_top {
	transform: rotateX(90deg) translateZ(150px);
}
.cube .out_bottom {
	transform: rotateX(-90deg) translateZ(150px);
}

/* 设置小立方体的样式 */
.cube span {
	display: block;
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50px;
	left: 50px;
}
.cube .in_pic {
	width: 200px;
	height: 200px;
}

/* 设置小立方体各个面的位置和旋转角度 */
.cube .in_front {
	transform: rotateY(0deg) translateZ(100px);
}
.cube .in_back {
	transform: translateZ(-100px) rotateY(180deg);
}
.cube .in_left {
	transform: rotateY(90deg) translateZ(100px);
}
.cube .in_right {
	transform: rotateY(-90deg) translateZ(100px);
}
.cube .in_top {
	transform: rotateX(90deg) translateZ(100px);
}
.cube .in_bottom {
	transform: rotateX(-90deg) translateZ(100px);
}

/* 设置鼠标悬停时立方体的动画效果 */
.cube:hover .out_front {
	transform: rotateY(0deg) translateZ(400px);
}
.cube:hover .out_back {
	transform: translateZ(-400px) rotateY(180deg);
}
.cube:hover .out_left {
	transform: rotateY(90deg) translateZ(400px);
}
.cube:hover .out_right {
	transform: rotateY(-90deg) translateZ(400px);
}
.cube:hover .out_top {
	transform: rotateX(90deg) translateZ(400px);
}
.cube:hover .out_bottom {
	transform: rotateX(-90deg) translateZ(400px);
}