【CSS/html】文字や画像を90度回転する方法【注意点も解説】

「縦に撮った写真画像を90度回転させて横にしたい！」

「文字を縦にしてスタイリッシュにしたい！」

CSSで文字や画像を90度、45度回転する方法を注意点と共に解説します。

【回転】transform:rotate(○○deg)

要素を回転させるには「transform: rotate(○○deg)」を指定します。「○○」には角度の数字が入ります。

90度であれば「transform: rotate(90deg)」、

45度であれば「transform: rotate(45deg)」です。

数値は0度を基準に指定した角度だけ右回りします。

マイナスを指定すると左回りです。

回転させるときの注意点

【注意点1】回転する要素はブロック要素

transform:rotateはspanやaタグなどのインライン要素には効きません。（imgは効ききます）

divで囲うか、display:blockを指定してブロック要素にしましょう。

display:inline-blockでも効きます。

【注意点2】上下のスペースを確保すること

下記は3行あるうちの中央のテキストを回転させた例です。
みごとに重なってしまっています。

transform:rotateで回転させても、その分の空白が自動で広がるわけではありません。

paddingやheight等で余白を確保する必要があります。

【注意点3】回転軸はブロックの中心

「transform: rotate」で要素を回転させるとき、その要素の真ん中を軸に回転します。

要素の幅が100％で文字が左端にあるときに回転させると、文字が思わぬ方向へ行きます。（シーソーのイメージ）

widthで横幅を指定するか「transform-origin」で回転軸を変えるかしましょう。

例1）width:fit-contentで横幅をテキストに合わせる

<style>
.example3{
    width:fit-content;
    transform:rotate(30deg);
    padding: 30px 0;
}
</style>
<div class="example3">回転させるテキスト</div>

例2）transform-origin:0 50%で回転軸を左にする

<style>
.example4{
    transform-origin:0 50%;
    transform:rotate(30deg);
}
</style>
<div class="example4">回転させるテキスト</div>

回転角度一覧

【90度回転】transform:rotate(90deg)

下記は「テキスト」を回転させた例です。

ソースコード

<style>
.example{
    border: 1px solid #999;
    background: #dfe0ed;
    width: 200px;
    height: 100px;
    font-weight: bold;
    font-size: 120%;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
}
.example>div{
    /*コレ*/transform: rotate(90deg)
}
</style>

<div class="example">
    <div>テキスト</div>
</div>

「transform: rotate(90deg)」の数値（角度）だけ変更しています。

【45度回転】transform:rotate(45deg)

【まとめ】回転させる方法

transform:rotate(○○deg)

• 【90度回転】transform:rotate(90deg)
• 【45度回転】transform:rotate(45deg)

回転させるときの注意点

• 回転する要素はブロック要素
• 上下のスペースを確保すること
• 回転軸はブロックの中心

以上、CSSで文字や画像を90度、45度回転する方法でした。