10
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

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.

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

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

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.

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
10
Help us understand the problem. What are the problem?