@charset "utf-8";

#view {
	width:200px;
	height:200px;
	margin:200px auto; /*上下外边距200 左右居中对齐*/
	perspective:800px;
	perspective-origin:350px -100px;
}

@keyframes rolling{
	100%{
		transform: rotate3d(1,1,1,360deg);
	}
}

#cube {
	width:200px;
	height:200px;
	transform-style:preserve-3d;
	animation-name:rolling;
	animation-duration:3s;
	animation-delay:6s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}

.face {
	width: 200px;
	height: 200px;
	position:absolute;
	background:#FF0;
	text-align:center;  /*字体左右居中 */
	line-height:200px;  /*字体上下居中*/
	font-size:120px;
	opacity:0.5;        /*透明度*/
	border:1px solid blue;
}

@keyframes face1{
	100%{
		transform: rotateY(-90deg);
	}
}

#face1 {
	z-index:6;   /*海拔*/
	transform-origin:left;
	animation-name:face1;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes face2{
	100%{
		transform:rotateY(90deg);
	}
}
#face2 {
	z-index:5;
	transform-origin:right;
	animation-name:face2;
	animation-duration:1s;
	animation-delay:1s;
	animation-fill-mode:forwards;
}

@keyframes face3{
	100%{
		transform:rotateX(90deg);
	}
}
#face3 {
	z-index:4;
	transform-origin:top;
	animation-name:face3;
	animation-duration:1s;
	animation-delay:2s;
	animation-fill-mode:forwards;
}

@keyframes face4{
	100%{
		transform:rotateX(-90deg);
	}
}

#face4 {
	z-index:3;
	transform-origin:bottom;
	animation-name:face4;
	animation-duration:1s;
	animation-delay:3s;
	animation-fill-mode:forwards;
}

@keyframes face5{
	100%{
		transform:translateZ(200px);
	}
}
#face5 {
	z-index:2;
	animation-name:face5;
	animation-duration:1s;
	animation-delay:4s;
	animation-fill-mode:forwards;
}

@keyframes face6{
	100%{
		transform:rotateY(180deg);
	}
}
#face6 {
	z-index:1;
	animation-name:face6;
	animation-duration:1s;
	animation-delay:5s;
	animation-fill-mode:forwards;
}