.box2 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 100px;
	margin: 100px auto;
	/*保留子元素3D动画效果*/
	transform-style: preserve-3d;
	/*俯角预览效果预设，方便查看3D效果*/
	transform: rotate3d(1, 1, 0, -30deg);
	/*定义动画执行时间*/
	transition: transform 5s;
}

.box2>div {
	position: absolute;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	/*设置透明度，方便查看*/
	opacity: 0.8;
}

.front {
	background-color: red;
	transform: translateZ(50px);
}

.brack {
	background-color: green;
	transform: translateZ(-50px);
}

.left {
	background-color: blue;
	transform: translateX(-50px) rotateY(-90deg);
}

.right {
	background-color: cyan;
	transform: translateX(50px) rotateY(90deg);
}

.top {
	background-color: pink;
	transform: translateY(-50px) rotateX(90deg);
}

.bottom {
	background-color: purple;
	transform: translateY(50px) rotateX(-90deg);
}

.box2:active {
	transform: rotate3d(1, 1, 0, 360deg) rotate3d(0, 1, 1, 360deg);
}