div {
	width:200px;
	height:200px;
	margin-top:100px;
	margin-right:auto;
	margin-left:auto;
}
.div1 {
	background-color:blue;
	position:absolute;
	top:0px;
	transform:translateZ(100px);
	/* transform:rotate3d(90,1,1,90deg);
	*/
}
.div2 {
	background-color:cyan;
	position:absolute;
	top:0px;
	transform:rotateY(90deg) translateZ(100px);
}
.div3 {
	background-color:red;
	position:absolute;
	top:0px;
	transform:rotateX(90deg) translateZ(100px);
}
.div4 {
	background-color:purple;
	position:absolute;
	top:0px;
	transform:rotateY(180deg) translateZ(100px);
}
.div5 {
	background-color:green;
	position:absolute;
	top:0px;
	transform:rotateY(-90deg) translateZ(100px);
}
.div6 {
	background-color:orange;
	position:absolute;
	top:0px;
	transform:rotateX(-90deg) translateZ(100px);
}
.whole {
	width:200px;
	position:relative;
	transition:all 3s;
	/* 设置使得变形能体现立体效果，通常给需要变形的元素的父元素设置 */
			transform-style:preserve-3d;
}
.whole:hover {
	transform:translate3d(0px,0px,100px) rotate3d(360,360,360,360deg);
}