JSFiddle - React, Tailwind, and code Playground

HTML

<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>
	<button onclick="rotY(-90)" style="top:0;">Левее</button><button style="top:0;left:100px;" onclick="rotY(90)">Правее</button>
	<button onclick="rotX(-90)" style="top:100px;"> Верх</button><button style="top:100px; left:100px;" onclick="rotX(90)">Низ</button>
	<button onclick="rotZ(-90)" style="top:200px;">На лево</button><button style="top:200px; left:100px;" onclick="rotZ(90)">На право</button>

CSS

body{
		width:100%;
		background:rgba(200,230,255,0.5);
	}
	.wrap {
		/*perspective: 800px;*/
		perspective-origin: 0 200px;
	}
	.cube {
		position: relative;
		width: 200px;
		height: 200px;
		transform-style: preserve-3d;
		margin:220px 220px;
	}
	.cube div {
		position: absolute;
		width: 200px;
		height: 200px;
		background:rgba(0,0,0,0.9);
		color:#fff;
		Box-shadow:0px 1px 0px #FFF,0px -1px 0px #FFF,1px 0px 0px #FFF,-1px 0px 0px #FFF;
	}
	.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(-90deg) translateY(-100px);
		transform-origin: top center;
	}
	.bottom {
		transform: rotateX(90deg) translateY(100px);
		transform-origin: bottom center;
	}
	.front {
		transform: translateZ(100px);
	}
	/*@keyframes spin_right{
		from { transform: rotateY(0);}
		to { transform: rotateY(90deg);}
	}

	.cube {
		animation: spin_right 1s infinite linear;
		animation: spin_right 1s ease;
	}*/
	button{
		position:fixed;
	}

JavaScript

var nowX = 0;
	var nowY = 0;
	var nowZ = 0;
	var off = true;
	function rotX(angle){
		if(off){
			var $elem = $(".cube");
			off = false;
			$({deg: nowX}).animate({deg: nowX+angle}, {
			duration: 2000,
				step: function(now) {
					$elem.css({
						transform: 'rotateX(' + now + 'deg) '+'rotateY('+nowY+'deg) '+'rotateZ('+nowZ+'deg)'
					});
				}
			},function(){off=true;});
			nowX = nowX + angle;
		}
	}
	function rotZ(angle){
		if(off){
			off = false;
			var $elem = $(".cube");
			$({deg: nowZ}).animate({deg: nowZ+angle}, {
			duration: 2000,
				step: function(now) {
					$elem.css({
						transform: 'rotateX(' + nowX + 'deg) '+'rotateY('+nowY+'deg) '+'rotateZ('+now+'deg)'
					});
				}
			},function(){off=true;});
			nowZ = nowZ + angle;
		}
	}
	function rotY(angle){
		if(off){
			off = false;
			var $elem = $(".cube");
			$({deg: nowY}).animate({deg: nowY+angle}, {
			duration: 2000,
				step: function(now) {
					$elem.css({
						transform: 'rotateX(' + nowX + 'deg) '+'rotateY('+now+'deg) '+'rotateZ('+nowZ+'deg)'
					});
				}
			},function(){off=true;});
			nowY = nowY + angle;
		}
	}