body {
	perspective: 1000px;
	perspective-origin: right;
}
.cube {
	margin: 25px auto;
	height: 100px;
	width: 100px;
	transform-style: preserve-3d;
}
.rotateY {
	animation: rotateY 10s linear infinite alternate;
}
	.rotateY:hover {
		animation-play-state: paused;
	}
	.cube > div {
		position: absolute;
		width: 100%;
		height: 100%;
		box-shadow: inset 0 0 15px rgba(0, 0, 0, .2);
		background-color: rgba(255, 255, 255, .1);
		color: gray;
		font-size: 20px;
		line-height: 100px;
		text-align: center;
	}
	.front{
		transform: translateZ(50px);
	}
	.back{
		transform: rotateY(180deg) translateZ(50px);
	}
	.right{
		transform: rotateY(90deg) translateZ(50px);
	}
	.left{
		transform: rotateY(-90deg) translateZ(50px);
	}
	.top{
		transform: rotateX(90deg) translateZ(50px);
	}
	.bottom{
		transform: rotateX(-90deg) translateZ(50px);
	}
@keyframes rotateY{
	from{
		transform: rotateY(0);
	}
	to{
		transform: rotateY(360deg);
	}
}