CSSのみで作る3Dキューブ[CSS]

FofR Onlineより、CSSのみで作る3Dキューブの紹介です。

デモページはコチラからただし、CSS3のためwebkit系のブラウザ、Google Chrome、Safari 4でしか動作しません。

css0906041.jpg

感想は、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は回転を指します。これらを指定するとデモのように動きます。