CSSだけでおしゃれに歯車を回してみる。 #CSS

こんな感じの歯車がくるくる回ってるアニメーションのをCSSと静止画だけで実現してみた。

完成品がこちら(モダンなブラウザじゃないと動かないかも)。
http://xiidec.appspot.com/gear.html

しくみ

歯車画像を４枚用意する。

こんなの。
それを

左歯車
左歯車(半透明)
右歯車
右歯車(半透明)

とならべる。半透明の歯車はちょっと下にズラす。

歯車を傾ける

-webkit-transform: rotateX(60deg) rotateY(-10deg);
これ。
このCSSで歯車が斜めになる。
X軸方向に60度、Y軸方向に−10度傾く。
こんな感じに。

歯車をまわす。

これが今回のキモ。

-webkit-animation: do_blue 3s;

３秒かけてdo_blueの変化をする、という意味。

            @-webkit-keyframes do_blue {
                0%   {-webkit-transform:rotate(0deg);}
                100%   {-webkit-transform:rotate(180deg);}
            }

そしてこれがdo_blueの中身。
0%:回転0度から100%:回転180度の状態にアニメーションする、という意味。
今回は使わなかったけど、たとえばscale(2,2)と指定すればグーンとヨコタテ2倍拡大する。

            @-webkit-keyframes do_red {
                0%   {-webkit-transform:rotate(17deg);}
                100%   {-webkit-transform:rotate(-163deg);}
            }

赤いギアはこんな感じ。チョットだけ回転の角度をズラす。
これによって噛み合ってるような感じになる。

完成

おしゃれな歯車
http://xiidec.appspot.com/gear.html

ソース全体

gear.html

<html>
    <head>
        <style>
            .gear_blue {
                -webkit-animation: do_blue 3s; 
                -webkit-animation-iteration-count: infinite;
            }
            .gear_red {
                -webkit-animation: do_red 3s; 
                -webkit-animation-iteration-count: infinite;
            }
            .opa{
                opacity:0.5;
            }
            .gears{
                -webkit-transform: rotateX(60deg) rotateY(-10deg);
                z-index: -1;
            }
            @-webkit-keyframes do_blue {
                0%   {-webkit-transform:rotate(0deg);}
                100%   {-webkit-transform:rotate(180deg);}
            }
            @-webkit-keyframes do_red {
                0%   {-webkit-transform:rotate(17deg);}
                100%   {-webkit-transform:rotate(-163deg);}
            }
        </style>
    </head>
    <body>
        <div class="gears">
            <img src="img/gear/gear1.png"  class="gear_blue" style="position: absolute; left: 0px; top: 0px">
            <img src="img/gear/gear1.png"  class="gear_blue opa" style="position: absolute; left: 0px; top: 60px">
            <img src="img/gear/gear2.png"  class="gear_red" style="position: absolute; left: 550px; top: 0px">
            <img src="img/gear/gear2.png"  class="gear_red opa" style="position: absolute; left: 550px; top: 60px">
        </div>
    </body>
</html>

まとめ

わりと簡単にオシャレな感じの歯車ができた。
ほんとうは『CSSだけで作るF-ZERO』をやりたかったけど、大変そうでやめた。
時間があったら頑張ってつくろうかな。