SVGタグ（要素）を使って正六面体の立方体を作成しました。

１、立方体を形成する６画面をSVGタグを使用して作成する。
　HTML例文:SVGタグ（200pxの正方形を６画面分作成）
　　　<svg class=”surface” id=”front” viewBox=”100 100 200 200″ >
　　　　<rect x=”100″ y=”100″ width=”200″ hight=”200″ />
　　　　<text x=”150″ y=”240″>1</text>
　　　</svg>
　a.200pxの正方形を作成する。例では、X軸に100px、Y軸に100pxの位置から200pxの正方形を作成している。

２、正面の位置を定義する。
　CSS例文：#front{transform: translateZ(100px);}
　a.「translateZ(100px)」Z軸に100px移動させる。

３、裏面の位置を定義する。
　CSS例文：#back{transform: rotateX(180deg) translateZ(100px);}
　a.「translateZ(100px)」Z軸に100px移動させる。
　b.「rotateX(180deg)」X軸に180°回転させる。回転させる事により正面と裏面の間に200pxの幅が出来る。

４、右面の位置を定義する。
　CSS例文：#right{transform: rotateY(90deg) translateZ(100px);}
　a.「translateZ(100px)」Z軸に100px移動させる。
　b.「rotateY(90deg)」Y軸に90°回転させる。回転させると正面の右端から直角に曲がり裏面と繋がる。

５、左面の位置を定義する。
　CSS例文：#left{transform: rotateY(-90deg) translateZ(100px);}
　a.「translateZ(100px)」Z軸に100px移動させる。
　b.「rotateY(-90deg)」Y軸に90°回転させる。回転させると正面の左端から直角に曲がり裏面と繋がる。

６、上面の位置を定義する。
　CSS例文：#top{transform: rotateX(90deg) translateZ(100px);}
　a.「translateZ(100px)」Z軸に100px移動させる。
　b.「rotateY(90deg)」X軸に90°回転させる。回転させると正面の上端から直角に曲がり左右裏面の上部が繋がる。

７、下面の位置を定義する。
　CSS例文：#bottom{transform: rotateX(-90deg) translateZ(100px);}
　a.「translateZ(100px)」Z軸に100px移動させる。
　b.「rotateY(-90deg)」X軸に90°回転させる。回転させると正面の下端から直角に曲がり左右裏面の下部が繋がる。

８、正六面体の全体を傾斜させて立方体として見せる。
　CSS例文：#cube{transform-style: preserve-3d;,transform: rotateX(-20deg) rotateY(-20deg);}
　a.「transform-style: preserve-3d」で３Ｄ空間の中で子要素がそれぞれの位置を維持するように定義する。
　b.「transform: rotateX(-20deg) rotateY(-20deg);」にて、Ｘ軸､Y軸それぞれに-20°傾斜させる。
　　正面しか見えていなかったが、X軸Y軸に対して傾斜を付ける事で立方体に見える様になる。

９、その他の注意点
　a.６画面の基準点が同じ点と成る様に、CSSにて「position」を使い基準点を合わせる。
　b.例文の様にSVGタグ（要素）に「transform」を指定する為、rectタグ（要素）毎にSVGタグ（要素）を定義する。
　　rectタグ（要素）に「transform」を同じ様に定義しても立方体は出来ない。

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

▼CSS

<style type="text/css">
body{
	width: 100%;
	height:100%;
}
#wrap {
	margin:200px 200px;
}
#cube {
	position: relative;
	transform-style: preserve-3d;
	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">
	<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="150" y="240">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="150" y="240">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="150" y="240">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="150" y="240">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="150" y="240">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="150" y="240">6</text>
		</svg>
	</div>
</div>

デモページは、こちら