[CSS]文字を斜めにする

はじめに

本記事では、以下Let's Log in!のように文字を斜めに表現する方法を記述します。

記述方法

コード

.login-subtitle {
  color: rgb(0, 0, 0);
  font-family: 'Permanent Marker', cursive;
  font-size: 12vh;
  text-align: start;
  transform: rotate(-7deg); ←ここ！！！
  padding-left: 15vw;
  position: absolute;
}

transform: rotate(-7deg);で文字を回転することができます。
-7degでマイナスになっております。
プラスでは時計回り、マイナスでは反時計回りのイメージです。

以下、7degにしてみました。

90degにしてみました。

90度になりました。Let's Log in!がお辞儀してますねw

つまり、~degの数字は角度を意味しています。

180degにすれば、

すってんころりん！180度ですね。
ということは、180の倍数では、このような形になります。

360degだと添付しなくてもわかりますね、傾き０ですね。

以上です。

終わりに

短い記事ですが、いかがでしょうか。
斜めにしてみるとデザインを工夫しやすいと思います。

また、今回思ったこととして、
自分が想像し、実現したいことは、CSSやJavaScriptでできるなと思いました。

以下今回の参考サイトです。
CSSでテキストを斜めに傾ける方法 (transformのrotateで回転させる)

明日も頑張ります！！