正六面体を入力した角度に回すJavaScriptを作成しました。

１、正六面体を囲っているタグのＣＳＳに基準点を定義する。
　　例では、divタグ（id=cube)のスタイルに「transform-origin」を
　　定義して、回転する基準点を設定している。

２、JavaScriptにて｢transform」の値を変更する。
　例：document.getElementById(id).style.transform = ‘rotateX(“入力値”deg) rotateY(“入力値”deg)’

↓以下がテストのソースサンプルです。

▼JavaScript

<script type="text/javascript">
window.onload = function () {
	/* 回転ボタンをクリックされた時 */
	document.querySelector("#rotation").onclick = function () {angle()};
	/* リセットボタンをクリックされた時 */
	document.querySelector("#reset").onclick = function () {angle_init()};
	/* cubeのデフォルト */
	function angle_init(){
		document.getElementById("tax").value = "-20";
		document.getElementById("tay").value = "-20";
		/*document.getElementById("taz").value = "-20";*/
		angle();
	}
	/* cubeを入力値に回転させる */
	function angle(){
		var angleX = document.getElementById("tax").value;
		var angleY = document.getElementById("tay").value;
		var AngleRotate =""
		if ( angleX == parseFloat(angleX))
			{AngleRotate = AngleRotate + "rotateX(" + angleX + "deg)"};
		if ( angleY == parseFloat(angleY))
			{AngleRotate = AngleRotate + "rotateY(" + angleY + "deg)"};
		if ( AngleRotate != "")
			{document.getElementById("cube").style.transform = AngleRotate};
	}
}
</script>

▼CSS

<style>
body{
	width: 100%;
	height:100%;
}
#buttonBox{
	margin:20px 10px;
}
#main {
	margin:200px 200px;
}
#cube {
	margin:0;
	position: relative;
	transform-style: preserve-3d;
	transform-origin:100px 100px;
	transform: rotateX(-20deg) rotateY(-20deg);
}
.surface {
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
 	height: 200px;
	text-align: center;
	line-height: 200px;
	box-sizing: border-box;
	border: 2px solid black;
}
text{
	fill:black;
	font-size:130px;
}
#front {
	transform: rotateY(0deg) translateZ(100px);
	background:red;/*赤*/
	opacity: 0.6;

}
#back {
	transform: rotateX(180deg) translateZ(100px);
	background:pink;/*ピンク*/
	opacity: 0.6;
}
#right{
	transform: rotateY(90deg) translateZ(100px);
	background:blue;/*青*/
	opacity: 0.6;
}
#left {
	transform: rotateY(-90deg) translateZ(100px);
	background:skyblue;/*水色*/
	opacity: 0.6;
}
#top {
	transform: rotateX(90deg) translateZ(100px);
	background:green;/*緑*/
	opacity: 0.6;
}
#bottom {
	transform: rotateX(-90deg) translateZ(100px);
	background:yellow;/*黄色*/
	opacity: 0.6;
}
</style>

▼HTML

<div id="wrap">
<!-- 回転率入力 -->
	<form id="AngleBox">
		<p><br />角度Ｘ：<input type="text" name="tax" id="tax" value="-20" title="角度Ｘ">-360から360を入力下さい<br /></p>
		<p><br />角度Ｙ：<input type="text" name="tay" id="tay" value="-20" title="角度Ｙ">-360から360を入力下さい<br /></p>
<!--		<p><br />角度Ｚ：<input type="text" name="taz" id="taz" value="-20" title="角度Ｚ"><br /></p>-->
	</form>
	<div id="buttonBox">
		<button id="rotation">回　転</button>
		<button id="reset">リセット</button>
	</div>
<!-- 正六面体 -->
	<div id="main">
		<div id="cube">
			<svg class="surface" id="front" viewBox="-100 -100 200 200" >
				<rect x="-100" y="-100" width="200" hight="200"></rect>
				<text x="-50" y="40">1</text>
			</svg>
			<svg class="surface" id="back" viewBox="-100 -100 200 200" >
				<rect x="-100" y="-100" width="200" hight="200"></rect>
				<text x="-50" y="40">2</text>
			</svg>
			<svg class="surface" id="right" viewBox="-100 -100 200 200" >
				<rect x="-100" y="-100" width="200" hight="200"></rect>
				<text x="-50" y="40">3</text>
			</svg>
			<svg class="surface" id="left" viewBox="-100 -100 200 200" >
				<rect x="-100" y="-100" width="200" hight="200"></rect>
				<text x="-50" y="40">4</text>
			</svg>
			<svg class="surface" id="top" viewBox="-100 -100 200 200" >
				<rect x="-100" y="-100" width="200" hight="200"></rect>
				<text x="-50" y="40">5</text>
			</svg>
			<svg class="surface" id="bottom" viewBox="-100 -100 200 200" >
				<rect x="-100" y="-100" width="200" hight="200"></rect>
				<text x="-50" y="40">6</text>
			</svg>
		</div>
	</div>
</div>

デモページは、こちら