.cube3d{
	margin-top: 150px;
	perspective: 1000px;
	perspective-origin: 50% 50%;
	opacity:0.3;
}

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

.cube3d > .cube div {
		position: absolute;
		padding: 10px;
		box-sizing: border-box;
		height: 100%;
		width: 100%;
		background-color: #fff;
		border: solid 1px #888;
		color: green;
		font: 10px arial;
		transition: transform 0.2s ease-in;
		border-radius: 10px;
	}

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

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

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

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

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

.cube3d > .cube .bottom {
	transform: rotateX(270deg) translateY(100px);
	transform-origin: bottom center;
}
/*
@keyframes rotate {
	from {
		transform: rotateX(0deg) rotateY(0deg);
	}

	to {
		transform: rotateX(360deg) rotateY(360deg);
	}
}
*/
@keyframes rotate {
	from {
		transform: rotateX(-30deg) rotateY(30deg);
	}

	to {
		transform: rotateX(-30deg) rotateY(390deg);
	}
}

.cube3d > .cube {
	animation: rotate 20s infinite linear;
}
.cube3d:hover {
	opacity: 1.0;

}

.cube3d:hover .front {
	transform: translateZ(200px);
}

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

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

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

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

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