Untitled

<html>

<head>
	<style>


		.wrap {
			perspective: initial;
			perspective-origin: 0 0;
		}

		.cube {
			z-index: 10
			position: relative;
			height: 200px;
			width: 200px;
			transform-style: preserve-3d;
			transition: 1s all;
			/*transform-origin: 0 100px;
    animation: mouv 10s infinite linear;*/
		}

		.cube div {
			position: absolute;
			width: 200px;
			height: 200px;
			box-shadow: inset 0 0 30px rgba(125, 125, 125, 0.8);
			font-size: 20px;
			text-align: center;
			line-height: 200px;
			color: white;
			font-family: sans-serif;
		}

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

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

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

		.top {

			transform: rotateX(90deg) translateY(-100px);
			transform-origin: top center;
			background-color: green;

		}

		.bottom {
			transform: rotateX(-90deg) translateY(100px);
			transform-origin: bottom center;
			background-color: black;
		}

		.front {
			transform: translateZ(100px);
			background-color: green;
		}

		.direction {
			z-index: 20;
			position: absolute;
		}

		.direction> div {
			position: absolute;
			background-color: rgba(191,191,191,0.5);
		}

		#dtop {
			width: 120px;
			height: 40px;
			left: 40px;
			top: 0px;
		}

		#dright {
			width: 40px;
			height: 120px;
			left: 160px;
			top: 40px;
		}

		#dbottom {
			width: 120px;
			height: 40px;
			left: 40px;
			top: 160px;
		}

		#dleft {
			width: 40px;
			height: 120px;
			left: 0;
			top: 40px;
		}
	</style>
</head>

<body>

	<div class="direction">
		<div id="dTop" data-x="0" data-y="-90"></div>
		<div id="dRight" data-x="90" data-y="0"></div>
		<div id="dBottom" data-x="0" data-y="90"></div>
		<div id="dLeft" data-x="-90" data-y="0"></div>
	</div>


	<div class="wrap">
		<div class="cube">
			<div class="front">front</div>
			<div class="back">back</div>
			<div class="top">top</div>
			<div class="bottom">bottom</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</div>

	<script>
		// function main() {
		// 	var cube = document.querySelector('.cube');
		// 	var rotateY = 0;
		// 	var rotateX = 0;
		// 	var tOrigin = '';
		// 	var arrayDirection = ['top', 'right', 'bottom', 'left'];
		//
		// 	function eventListener(param) {
		// 		var test = document.getElementById(param);
		// 		test.addEventListener('click', rotate);
		// 	}
		//
		// 	function rotate(evt) {
		// 		var direction = evt.target.getAttribute('id');
		// 		var elDirection = document.getElementById(direction);
		//
		// 		if (direction === 'top' || direction === 'bottom') {
		// 			tOrigin = '0 100px';
		// 		} else {
		// 			tOrigin = 'center center';
		// 		}
		//
		// 		x = parseInt(elDirection.dataset.y);
		// 		y = parseInt(elDirection.dataset.x);
		//
		// 		rotateX += x;
		// 		rotateY += y;
		//
		// 		cube.style.transformOrigin = tOrigin;
		// 		cube.style.transform = "rotateY(" + rotateY + "deg) rotateX(" + rotateX + "deg)";
		//
		// 	}
		// 	eventListener('top');
		// 	eventListener('right');
		// 	eventListener('left');
		// 	eventListener('bottom');
		// }
		// document.addEventListener('DOMContentLoaded', main);
	</script>
</body>

</html>