クリエイターのためのWebテク講座 -アナログ時計を作ろう(1)

CSS3のrotateプロパティを使って、要素の角度を調整することができます。これを応用して、アナログ時計を作ってみましょう。

サンプルを見る

※今回のサンプルは、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。残念ながら現時点ではIEは「transitionプロパティ」には対応していません。

回転の中心点を指定する。

時計を作る前に、回転について理解しましょう。

物体の回転には、必ず中心点というものが存在します。その中心点を設定するプロパティが、CSSの「transform-originプロパティ」です。

「transform-originプロパティ」は、要素の左上から、何％の位置に中心点を置くかを、X方向・Y方向それぞれ指定し、デフォルト値は「X:50% , Y:50%」です。

下記にいくつか例を示します。

サンプルを見る

サンプルでは、回転の中心点をそれぞれ、デフォルト・左上（0% 0%）・右下（100% 100%）に指定し、setIntervalで回転させています。

指定方法は

transform-origin:100% 100%;

この様に「transform-origin:X Y;」と指定します。「XY」の％指定のほかに「bottom right」等の指定方法もあります。

transform-origin:bottom right;

この様に指定した場合、右下になるので、「transform-origin:100% 100%;」と同じ意味になります。

また、「transform-origin」プロパティは、ベンダープリフィックスが必要なプロパティなので、第6回で紹介した「prefixfree.js」を使うとよいでしょう。

回転の指定。

次に、要素を回転させます。

回転させるには、「transform」プロパティを使います。これはCSS3アニメーションの時にも触れましたね。当然ベンダープリフィックスが必要なので、「prefixfree.js」を使います。

「transform」プロパティの使い方は、「transform:rotate(角度);」で、以下のように指定します。

transform:rotate(180deg);

この時単位としてdegを付けるのを忘れないようにしましょう。

また、「translate」等と組み合わせて

transform:translate(50px , 50px) rotate(180deg);

この様に、移動と組み合わせることもできます。なお、回転に指定する数は、必ずしも「0度～360度」である必要はありません。「回転の中心点を指定する。」で例示したサンプルのソースを見てみると、

<script type="text/javascript">
var rot = 0;
setInterval(rotate , 10)
function rotate()
{
    rot += 5;
    $(".sq").css("transform" , "rotate(" + rot + "deg)");
    $("#info").text("角度：" + rot);
}
</script>

上記のように、「rot」の値に「5」を加算し続けています。これでは、「rot」の値はいつかは「360」を超えてしまいます。しかし、「transform:rotate」プロパティでは、例えば「transform:rotate(380deg);」という値が来た場合、角度に変換して指定しますので、360で割った余り「20度」となります。

如何でしょうか？ CSS3の角度と回転の仕組みが分かったところで、次回は早速時計のプログラムを解説します。