/*  Rotating Cube  */
.wrap {
	margin-top: 150px;
	perspective: 1000px;
	perspective-origin: 50% 50%;
}


.cube {
	margin: auto;
	position: relative;
	height: 200px;
	width: 200px;
	transform-style: preserve-3d;
}

	.cube div {
		position: absolute;
		padding: 10px;
		box-sizing: border-box;
		height: 100%;
		width: 100%;
		opacity: 0.9;
		background-color: #000aaa;
		border: solid 1px #eee;
		color: #fff;
		font: 10px arial;
		transition: transform 0.2s ease-in;
	}

.front {
	transform: translateZ(100px);
}

.back {
	transform: translateZ(-100px) rotateY(180deg);
}

.right {
	transform: rotateY(-270deg) translateX(100px);
	transform-origin: top right;
}

.left {
	transform: rotateY(270deg) translateX(-100px);
	transform-origin: center left;
}

.top {
	transform: rotateX(-270deg) translateY(-100px);
	transform-origin: top center;
}

.bottom {
	transform: rotateX(270deg) translateY(100px);
	transform-origin: bottom center;
}

@keyframes rotate {
	from {
		transform: rotateX(0deg) rotateY(0deg);
	}

	to {
		transform: rotateX(360deg) rotateY(360deg);
	}
}

.cube {
	animation: rotate 20s infinite linear;
}
/*
.wrap:hover .front {
	transform: translateZ(200px);
}

.wrap:hover .back {
	transform: translateZ(-200px) rotateY(180deg);
}

.wrap:hover .right {
	transform: rotateY(-270deg) translateZ(100px) translateX(100px);
}

.wrap:hover .left {
	transform: rotateY(270deg) translateZ(100px) translateX(-100px);
}

.wrap:hover .top {
	transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
}

.wrap:hover .bottom {
	transform: rotateX(270deg) translateZ(100px) translateY(100px);
}
*/