CSSで実装する文字を回転させるホバーエフェクトまとめ

2020.11.30
HTML&CSS

リンクのテキストにカーソルをマウスオーバーした際に、文字を回転させるホバーエフェクトのサンプルをまとめてみました。

文字を回転させる

ホバーした際に、テキストを縦(垂直方向)に回転させるエフェクトです。

SAMPLE

<a href="#"><span>SAMPLE</span></a>

a span {
  display: inline-block;
}
a:hover span {
  transition: .5s;
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

transformの値「rotateX(360deg)」を変更すれば、回転の方向も変更できます。

下記は、「rotateY(360deg)」を設定してテキストを横(水平方向)に回転させています。

SAMPLE

a span {
  display: inline-block;
}
a:hover span {
  transition: .5s;
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}

文字を一回転させる

上記のtransformの角度に「360deg」を設定した場合、テキストが一回転します。

SAMPLE

<a href="#"><span>SAMPLE</span></a>

a span {
  display: inline-block;
}
a:hover span {
  transition: .5s;
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

テキストが長いと、高さも必要になるため、少し使いづらいエフェクトかもしれません。角度を抑えれば、テキストを少し傾けるだけのエフェクトもできます。

SAMPLE

a span {
  display: inline-block;
  transition: .3s;
}
a:hover span {
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

一文字だけ回転させる

上記では、テキスト全体を<span>タグで囲いましたが、個別に一文字だけを回転させることもできます。

SAMPLE

<a href="#">SAMPL<span>E</span></a>

a span {
  display: inline-block;
}
a:hover span {
  transition: .5s;
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

一番後ろの文字だけを回転させました。CSSはテキスト全体を回転させる場合と同じです。
上記と同様に、transformの値によって横の回転、角度の回転を設定することも可能です。

一文字ずつ回転させる

一文字ずつ<span>タグで囲うことで、文字が順に回転するエフェクトをつけることもできます。

SAMPLE

<a href="#"><span>S</span><span>A</span><span>M</span><span>P</span><span>L</span><span>E</span></a>

a span {
  display: inline-block;
}
a:hover span {
  transition: .6s;
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}
a:hover span:nth-of-type(1) {
  -webkit-transition-delay: .02s;
  transition-delay: .02s;
}
a:hover span:nth-of-type(2) {
  -webkit-transition-delay: .04s;
  transition-delay: .04s;
}
a:hover span:nth-of-type(3) {
  -webkit-transition-delay: .06s;
  transition-delay: .06s;
}
a:hover span:nth-of-type(4) {
  -webkit-transition-delay: .08s;
  transition-delay: .08s;
}
a:hover span:nth-of-type(5) {
  -webkit-transition-delay: .10s;
  transition-delay: .10s;
}
a:hover span:nth-of-type(6) {
  -webkit-transition-delay: .12s;
  transition-delay: .12s;
}

<span>ごとにtransition-delayで回転を開始するタイミングをずらしています。文字数が増えると、項目が増えて少し面倒な設定です。

カーソルを離した際のエフェクトの設定

transitionの設定位置によって、カーソルをテキストに乗せた時のみだけでなく、マウスを離したときにも同様にエフェクトをつけることができます。

SAMPLE

<a href="#"><span>SAMPLE</span></a>

a  span {
  display: inline-block;
  transition: .5s;
}
a:hover  span {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

一番上の例では、カーソルをホバーした時のみ回転しましたが、サンプルでは、カーソルを離した際も回転してテキストが回るようになりました。

二つの違いは、transitionの位置です。上記では、「a:hover span」に設定されていたtransitionが、「a span」に設定されています。

要素自体に「transition」を設定した場合は、カーソルを乗せたときも外したときもtransitionが適用されますが、「:hover 」付きの要素に指定した場合は、マウスを乗せたときだけしかtransitionは適用されないためです。
付けたいエフェクトの種類によって、設定する位置を使い分けます。