jQuery と CSS でHTML要素を回転させる方法

HTML要素をグルグル回転させる

今回は jQuery と CSS を使ってHTML要素をグルグル・・・と回転させます。

要素を時計回りで45度回転させる場合：transform:rotate(45deg);

動作サンプル

ページが読み込まれると、ピンク色のボックスとその中の文字「要素」が回転し始め、そのまま延々と回り続けます。

要素

jQuery コード

内容はシンプルです。ページが読み込まれると同時にタイマーを起動して100ミリ秒間隔で「kaiten()」関数を実行しています。

関数が実行されるたびに角度用の変数は「1」ずつ加算されますが、一周の 360 を超えてもエラーになることはありませんので、そのまま加算を続けても問題はありません。まだ検証はしていませんが、おそらく変数 kakudo の値がオーバーフローするまで回転し続けるでしょう。

     var kakudo = 0;     // 角度用変数

     $(function() {
          // タイマースタート kaiten() を100ミリ秒間隔で実行
          tm = setInterval("kaiten()",100);
     });

     function kaiten() {
          kakudo += 1;     // 角度+1
          // youso という id を持つ要素を回転する
          $("#youso").css("transform", "rotate(" + kakudo + "deg)");
     } 

CSS

今回のCSSのポイントは「display: table-cell」です。これを削除してしまうとピンク色のボックスが正方形ではなく、記事の横幅いっぱいまで拡大します。

#youso {
     background-color: #F06;
     text-align: center;
     font-weight: bold;
     color: #FFF;
     display: table-cell;
     vertical-align: middle;
     font-size: 36px;
     padding: 20px;
} 

HTML ソース

今回、回転させたHTML要素は「id="youso"」を付けた「div」タグです。

<div id="youso">要素</div> 

END