ホームへ

CSSで文字や画像を90度,45度回転する方法

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

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

CSSで文字や画像を90度、45度回転する方法を解説します。

回転 transform: rotate(○○deg)

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

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

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

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

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

回転する要素はブロック要素

transform: rotateはspanやaタグには効きません。

divに囲うか、display:blockを指定しましょう。

ただし、imgには効きます。

90度回転 transform: rotate(90deg)

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

0度(指定なし)

テキスト

180度

テキスト

90度

テキスト

-90度(270度)

テキスト

ソースコード

<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)

45度

テキスト

-45度

テキスト

135度

テキスト

-135度

テキスト

回転軸の変更

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

この軸を変えたいときは「transform-origin」を指定します。

詳しくは下記記事をご覧ください。

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

「transform: rotate(○○deg)」を指定

90度「transform: rotate(90deg)」

45度「transform: rotate(45deg)」

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

マンガで読める関連記事