CSSでテキストを1文字ずつ回転させる

はじめに

CSSでは transform: rotate() を使用することで特定の領域を回転させることが可能です。この記事では、 rotate を使用して次のように定義された文字を1文字ずつ回転させる方法について紹介します。

html

<div class="rotate">
  <span>ま</span>
  <span>わ</span>
  <span>る</span>
  <span>よ</span>
</div>

1文字ずつ同じ方向に回転させる

ブロック内の文字を1文字ずつ回転させる場合、次のようにCSSを定義します。

css

.rotate span {
  display: inline-block;
  transform: rotate(50deg)
}

実行例

See the Pen rotate-char-one-by-one-1 by Tsuyoshi Yamaguchi (@Tsuyoshi84) on CodePen.

交互に左右別方向へと回転させる

テキストの各文字を交互に別方向へと回転させる場合、次のように nth-child(even) 、 nth-child(odd) を使用します。

css

.rotate span {
  display: inline-block;
}

.rotate span:nth-child(even) {
  transform: rotate(50deg);
}

.rotate span:nth-child(odd) {
  transform: rotate(-50deg);
}

実行例

See the Pen rotate-char-one-by-one-2 by Tsuyoshi Yamaguchi (@Tsuyoshi84) on CodePen.

アニメーションで回転させる

アニメーションを使用して文字を回転させる場合、次のように animation と keyframes を利用します。

css

.rotate span {
  display: inline-block;
  animation: rotate-anime 2s ease-in-out infinite;
}

@keyframes rotate-anime {
 100%{ transform: rotate(360deg) }
}

実行例

See the Pen rotate-char-one-by-one-3 by Tsuyoshi Yamaguchi (@Tsuyoshi84) on CodePen.

参考