CSS3 の Transforms プロパティを使って簡単 3D Cube 表示

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

Chrome が version 12 になったときにテンションが上がって作ったサンプルです.

それまでは Safari でしかサポートされていなかった CSS3 による Z軸の奥行き表現が Chrome でも使えるようになり, より CSS3 による豊かな表現が可能になりました.

作ったのはよかったのですが, それから仕事が忙しくなり半年間放置してたってのは反省…

iPhone でも普通に動くのでよかったら参考までに. iPhone は webkit をサポートしてない(正確にはネイティブ起動のsafariでは動くらしいが…)ので標準での 3D 表現って意味では唯一の方法かも.

Demo Download

Code

サンプルの全コードです.

<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>CSS3 - 3D Cube</title>
        
        <style>
            
            .main {
                width: 850px;
                padding: 20px;
                display: -webkit-box;
                /* 3D設定 */
                -webkit-transform-style: preserve-3d;
                -webkit-perspective: 1200;
                /* 少し上から見下ろす感じ  */
                -webkit-transform: rotateX(-15deg);
            }
            
            .cube {
                margin: 40px;
                width: 200px;
                height: 200px;
                
                -webkit-transform-style: preserve-3d;
                -webkit-transform: translateZ( -100px );
            }
            
            .rolling {
                -webkit-animation: rolling 2s infinite;
            }
            
            .pitching {
                -webkit-animation: pitching 2s infinite;
            }
            
            .yawing {
                -webkit-animation: yawing 2s infinite;
            }
            
            @-webkit-keyframes rolling {
                  0% { -webkit-transform: translateZ(-100px) rotateX(0deg); }
                100% { -webkit-transform: translateZ(-100px) rotateX(360deg); }
            }
            
            @-webkit-keyframes pitching {
                  0% { -webkit-transform: translateZ(-100px) rotateY(0deg); }
                100% { -webkit-transform: translateZ(-100px) rotateY(360deg); }
            }
            
            @-webkit-keyframes yawing {
                  0% { -webkit-transform: translateZ(-100px) rotateZ(0deg); }
                100% { -webkit-transform: translateZ(-100px) rotateZ(360deg); }
            }
            
            .cube [class|=plane] {
                position: absolute;
                width: 200px;
                height: 200px;
                border: solid 1px black;
                
                font-size: 64px;
                text-align: center;
                line-height: 200px;
            }
            
            .cube .plane-front  { background-color: hsla(  0, 100%, 50%, 0.7); }
            .cube .plane-back   { background-color: hsla( 60, 100%, 50%, 0.7); }
            .cube .plane-right  { background-color: hsla(120, 100%, 50%, 0.7); }
            .cube .plane-left   { background-color: hsla(180, 100%, 50%, 0.7); }
            .cube .plane-top    { background-color: hsla(240, 100%, 50%, 0.7); }
            .cube .plane-bottom { background-color: hsla(300, 100%, 50%, 0.7); }
            
            .cube .plane-front    { -webkit-transform: translateZ(100px); }
            .cube .plane-back     { -webkit-transform: rotateX(-180deg) translateZ(100px); }
            .cube .plane-right    { -webkit-transform: rotateY(  90deg) translateZ(100px); }
            .cube .plane-left     { -webkit-transform: rotateY( -90deg) translateZ(100px); }
            .cube .plane-top      { -webkit-transform: rotateX(  90deg) translateZ(100px); }
            .cube .plane-bottom   { -webkit-transform: rotateX( -90deg) translateZ(100px); }
            
        </style>
        
    </head>
    
    <body>
        
        <h1>CSS3 - 3D Cube</h1>
        
        <div class="main">
            <div class="cube rolling">
                <div class="plane-front">front</div>
                <div class="plane-back">back</div>
                <div class="plane-right">right</div>
                <div class="plane-left">left</div>
                <div class="plane-top">top</div>
                <div class="plane-bottom">bottom</div>
            </div>
            <div class="cube pitching">
                <div class="plane-front">front</div>
                <div class="plane-back">back</div>
                <div class="plane-right">right</div>
                <div class="plane-left">left</div>
                <div class="plane-top">top</div>
                <div class="plane-bottom">bottom</div>
            </div>
            <div class="cube yawing">
                <div class="plane-front">front</div>
                <div class="plane-back">back</div>
                <div class="plane-right">right</div>
                <div class="plane-left">left</div>
                <div class="plane-top">top</div>
                <div class="plane-bottom">bottom</div>
            </div>
        </div>
        
    </body>
</html>

Tips

遠近感を出す

-webkit-transform-style: preserve-3d;

と設定することで3D関連の transform が可能になります.

また, -webkit-perspective プロパティにに数値を設定することで遠近感を調整することができます.

-webkit-animation プロパティを使って回転アニメーション

-webkit-animation を使うと簡単にアニメーションを再生することができます.

今回のエントリーとはあまり関係がないので詳しい説明は端折ります.

以前 JavaScript でピアノを作ったときにざっくりまとめたので知りたい方はこちらへ.

Reference

来週から年末にかけて忙しくなるので, 毎日更新ってのは厳しいかなぁ~.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT