文字の画像(イメージ)化
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">1</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
広告
生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン