JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

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

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

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

要素を右回転で45度回転させるCSStransform:rotate(45deg);

動作サンプル

ページが読み込まれると同時にピンク色のボックスとその中の文字「要素」が回転します。 

要素

jQuery コード

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

     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に特筆すべき点はありませんね。 

#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> 

終わり