* {
	margin:0;
	padding:0;
}
.box {
	position:relative;
	width:200px;
	height:200px;
	margin:300px auto;
	/* 开启 3d 舞台 */
        transform-style:preserve-3d;
	transition:all 2s ease;
}
.side {
	position:absolute;
	top:0;
	left:0;
	width:200px;
	height:200px;
	text-align:center;
	line-height:200px;
	font-size:36px;
	color:#ffffff;
	background:rgba(66,66,66,0.5);
}
/* 往左移动  宽度的一半 并按照 Y 轴旋转 90度*/
      .left {
	transform:translateX(-100px) rotateY(90deg);
	background:rgba(57,57,107.5);
}
/* 往右移动 宽度的 一半 并按照 Y 轴旋转 90度 */
      .right {
	transform:translateX(100px) rotateY(90deg);
	background:rgba(62,238,86,0.5);
}
/* 往上移动  宽度的一半 并按照 X 轴旋转 90度*/
      .top {
	transform:translateY(-100px) rotateX(90deg);
	background:rgba(164,57,226,0.5);
}
/* 往下移动  宽度的一半 并按照 X 轴旋转 90度*/
      .bottom {
	transform:translateY(100px) rotateX(90deg);
	background:rgba(212,214,53,0.5);
}
/* 往前移动  宽度的一半*/
      .before {
	transform:translateZ(100px);
	background:rgba(216,107,17,0.5);
}
/* 往后移动  宽度的一半*/
      .after {
	transform:translateZ(-100px);
	background:rgba(221,41,176,0.5);
}
/* 鼠标 放上去的时候 触发旋转 */
      .box:hover {
	cursor:pointer;
	transform:rotateX(360deg) rotateY(360deg);
}