FofR Onlineより、CSSのみで作る3Dキューブの紹介です。
デモページはコチラからただし、CSS3のためwebkit系のブラウザ、Google Chrome、Safari 4でしか動作しません。
感想は、CSSでここまでできるようになったのかーということです。いやでもすごいです。
下記がソースです。
HTML
<div class="cube">
<div class="topFace">
<div>
Content
</div>
</div>
<div class="leftFace">
Content
</div>
<div class="rightFace">
Content
</div>
</div>
CSS
.cube {
position: relative;
top: 200px;
}
.rightFace,
.leftFace,
.topFace div {
padding: 10px;
width: 180px;
height: 180px;
}
.rightFace,
.leftFace,
.topFace {
position: absolute;
}
.leftFace {
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
background-color: #ccc;
}
.rightFace {
-webkit-transform: skewY(-30deg);
-moz-transform: skewY(-30deg);
background-color: #ddd;
left: 200px;
}
.topFace div {
-webkit-transform: skewY(-30deg) scaleY(1.16);
-moz-transform: skewY(-30deg) scaleY(1.16);
background-color: #eee;
font-size: 0.862em;
}
.topFace {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
top: -158px;
left: 100px;
}
ポイントは、-webkit-transform: skewY(-30deg) scaleY(1.16);
-moz-transform: skewY(-30deg) scaleY(1.16);
ですね。
-moz-transformは、Gecko 1.9.1が必要ゆえにFirefox3では動作しません。skewは傾きになり、rotateは回転を指します。これらを指定するとデモのように動きます。
コメント