文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン > 文字を回転する

文字回転のCSS生成

CSS3で追加された「animetion」を利用すると、文字の回転は簡単にできます。文字を目立たせたい場合やホームページのデザインとして、有効な手段となります。

当ページでは、簡単な操作で文字回転のCSSを自動で作成できます。「横軸回転」「縦軸回転」「時計回り」「反時計回り」に対応しています。各回転の組み合わせも簡単に確認できますので、是非お試しください。

文字を回転させ見よう

回転速度
回転方向
開始文字色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
中間文字色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
文字回転は簡単
使用したhtml
<span class="roll">文字回転は簡単</span>
生成したCSS
.roll {
  display  : inline-block;
  animation: rollkAnime 2s linear infinite;
  color    : #000000;
  font-size: 160%
}
@keyframes rollkAnime{
   50% {
         color    : #66ff66;
         transform: rotateX(180deg);
       }
  100% {
         color    : #000000;
         transform: rotateX(360deg);
       }
}
「animation」の使い方は以下を参照ください。
animation 「アニメーション」の構文
ページTOP
広告
広告

色々な文字回転

CSSの「animation」を使用することで、色々なブリンクを作成することができます。

回りながら大小する文字

文字色を2色に変化しながら横回転して、文字サイズを10%～100%に変化させています。

文字回転＋大小 
<style type="text/css">
.sample1{
  display  : inline-block;
  animation: sample1Anime 3s linear infinite; /* アニメーション指定 */
  font-size: 160%                     /* 文字サイズ */
}
@keyframes sample1Anime{
  50% {
       color    : #66ff66;            /* 文字色 */
       transform: rotate(180deg)      /* 横回転 */
                  scale(0.1, 0.1);    /* 大きさ */
     }
 100% {
       color    : #000000;            /* 文字色 */
       transform: rotate(360deg)      /* 横回転 */
                  scale(1,1);         /* 大きさ */
     }
}
</style>
ページTOP

1文字づつ回転する

1文字づつ回転させる場合は、1文字づつにclassを割り当てます。classを割り当てた単位で変化（回転）が行われます。

１ 文 字 づ つ 回 転 
<span class="sample21">１</span>
<span class="sample21">文</span>
<span class="sample21">字</span>
<span class="sample21">づ</span>
<span class="sample21">つ</span>
<span class="sample21">回</span>
<span class="sample22">転</span>

<style type="text/css">
.sample21{
  display  : inline-block;
  animation: sample21Anime 3s linear infinite; /* アニメーション指定 */
  font-size: 160%;                   /* 文字サイズ */
}
@keyframes sample21Anime{
 100%{ transform: rotate(360deg) }   /* 横回転 */
}
.sample22{
  display  : inline-block;
  animation: sample22Anime 3s linear infinite; /* アニメーション指定 */
  font-size: 160%;                   /* 文字サイズ */
}
@keyframes sample22Anime{
  50%{ transform: rotate(180deg) }  /* 横回転 */
 100%{ transform: rotate(0deg)   }  /* 横回転（逆） */
}
</style>
ページTOP

画像やイラストでも同じ指定で回転します

画像やイラスト、DIVなどのブロック要素などでも文字回転と違いはありません。
画像の回転については以下をご確認ください。
画像回転のCSS生成

ねこ ぱんだ うさぎ 
<span class="sample31"><img src="neko.png"  alt="ねこ"></span>
<span class="sample32"><img src="panda.png" alt="ぱんだ"></span>
<span class="sample33"><img src="usagi.png" alt="うさぎ"></span>

<style type="text/css">
.sample31{
  display  : inline-block;
  animation: sample31Anime 3s linear infinite;
}
@keyframes sample31Anime{
 100%{ transform: rotateX(360deg); }   /* 横軸回転 */
}
.sample32{
  display  : inline-block;
  animation: sample32Anime 3s linear infinite;
}
@keyframes sample32Anime{
 100%{ transform: rotateY(360deg); }   /* 縦軸回転 */
}
.sample33{
  display  : inline-block;
  animation: sample33Anime 3s linear infinite;
}
@keyframes sample33Anime{
 100%{ transform: rotate(360deg); }    /* 横回転 */
}
</style>
ページTOP

注意事項

CSSの「animation」を使用しています。「animation」は、古いブラウザや一部ブラウザでは動作しません。

「animation」の使い方は以下を参照ください。
animation 「アニメーション」

ページTOP
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの？
生成コードに利用制限はある？
生成コードに保証はある？
jQueryで生成できない？

広告
ページTOP

当サイト内の関連するページ

便利なCSS、JavaScriptの自動生成一覧
sample
CSSで
透かし文字

CSS背景文字
CSS
blink

CSSブリンク
CSSで改行位置を指定する。

CSS改行位置
先頭文字を大きくするCSS

先頭文字
フォントサイズ
10 12 14

文字サイズ
文字の
影付け

影付け
文書先頭のインデントをCSSで指定

インデント
言語切り替え

言語切換え
CSSで
縁取り

CSS文字縁取り
SVGで縁取り

SVG文字縁取り
文字重ね

画像文字重ね
NEW,UPのマーク付け

NEW,UP
文字を
遠近表示

遠近・奥行
1文字回転縦軸回転

文字の回転
縦長横長

縦長・横長
文字スクロール

スクロール
マウスで文字選択の色をCSSで変更

マウス選択色
左斜体文字右斜体文字

斜体文字
文字をマーカーなどで強調する

文字の強調

縦書き

CSSで文書を縦書きにする

縦書き
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン