[CSS]3枚の画像を使って、立体的なキューブ状にするスタイルシート

CSS3を使って、3枚の画像を3Dのキューブ状にするスタイルシートを紹介します。

Building a 3D Cube With HTML5 and CSS3
デモ

[ad#ad-2]

画像はdiv要素で実装されているため、CSSオフ時は上のキャプチャの左のように表示されます。
使用している画像はサイズ100x100の3枚で、下記のようになります。

画像のキャプチャ

実装は、下記のようになります。

HTML

HTMLには、HTML5を使用しています。

<div class="cube">
	<div class="face top"><img src="img/WPN-P.png" width="100" height="100"></div>
	<div class="face left"><img src="img/WPN-W.png" width="100" height="100"></div>
	<div class="face right"><img src="img/WPN-N.png" width="100" height="100"></div>
</div>

CSS

元記事のままだと表示がずれてしまうので、.faceをabsoluteに変更しました。

.cube {
	position: absolute;
	top: 100px;
	left: 100px;
}
.face {
	position: absolute;
	width: 100px;
	height: 100px;
	overflow: hidden;
}
.top {
	top: 0;
	left: 89px;
	background: #ffffff;
	-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
	-moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
	top: 77px;
	left: 44px;
	background: #ffffff;
	color: #ffffff;
	-webkit-transform: rotate(15deg) skew(15deg, 15deg);
	-moz-transform: rotate(15deg) skew(15deg, 15deg);
}
.right {
	top: 77px;
	left: 133px;
	background: #ffffff;
	color: #ffffff;
	-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
	-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}

[ad#ad-2]

試しに、当方で作成したものをアップしました。
テストページ(HTML5版）
※absoluteに変更版です。

また、HTML5じゃなくてもいいのでは？と思ってXHTML版も作成してみました。
ついでに、relativeにしてtopを調整しています。多分relativeは間違いだと思うけど。
テストページ(XHTML版）