CSSでdivを90度回転させる超簡単テクニック！サンプルコード付き
HTMLとCSSを使って<div>要素を90度回転させる方法
このチュートリアルでは、HTMLとCSSを使って<div>要素を90度回転させる方法を解説します。2つの方法をご紹介します。
CSSのtransformプロパティを使って、要素を回転、移動、スケーリングすることができます。この方法は、シンプルでわかりやすいのが特徴です。
.rotate90 {
transform: rotate(90deg);
}
上記のコードは、.rotate90クラスを持つすべての<div>要素を90度回転させます。
transform-originプロパティを使って回転の中心点を変更する
デフォルトでは、要素の中央が回転の中心点になります。しかし、transform-originプロパティを使って、回転の中心点を任意の場所に変更することができます。
.rotate90 {
transform: rotate(90deg) translate(-50%, -50%);
transform-origin: top left;
}
方法2：CSSのrotate()関数を使う
CSSのrotate()関数を使って、要素を任意の角度で回転させることができます。この方法は、より柔軟な回転が可能ですが、transformプロパティを使う方法よりも少し複雑です。
.rotate45 {
transform: rotate(45deg);
}
補足
- 回転する要素の幅と高さを設定しておくと、回転後の表示がわかりやすくなります。
- 要素を回転させると、親要素からはみ出す可能性があります。必要に応じて、親要素の幅と高さを調整してください。
- 3D効果のある回転を実現したい場合は、CSSの
perspectiveプロパティを使用することができます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSでdivを回転させる</title>
<style>
.rotate90 {
transform: rotate(90deg);
width: 100px;
height: 100px;
background-color: #ccc;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="rotate90">回転したdiv要素</div>
</body>
</html>
説明
このコードは、以下の内容を実行します。
<div>要素を作成し、クラス名にrotate90を設定します。- 要素の幅と高さを100pxに設定し、背景色をグレーにします。
- 要素内にテキストを配置し、行高を要素の高さと同じに設定します。
実行結果
上記コードを実行すると、画面に以下の様に90度回転したグレーのdiv要素が表示されます。
回転したdiv要素
バリエーション
このサンプルコードをベースに、以下のバリエーションを作成することができます。
- 回転角度を変更する
- 複数の要素を回転させる
- アニメーションを使って要素を回転させる
これらのバリエーションについて詳しく知りたい場合は、以下の情報源を参照してください。
CSSでdivを回転させるその他の方法
transform-origin プロパティと translate() 関数を使用する
この方法は、回転の中心点を任意の位置に設定してから回転させることで、要素を回転させることができます。
.rotate-center {
transform-origin: 50% 50%; /* 回転の中心点を要素の中央に設定 */
transform: rotate(45deg); /* 45度回転 */
}
transform3d 関数を使用する
この方法は、3D空間での回転を表現するために使用されます。より複雑な回転を実現したい場合に役立ちます。
.rotate-3d {
transform: rotate3d(1, 1, 1, 45deg); /* X軸、Y軸、Z軸をそれぞれ1回転させ、45度回転 */
}
アニメーションを使用する
この方法は、要素を回転させるアニメーションを作成するために使用されます。
.rotate-animation {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
calc() 関数を使用する
この方法は、変数を使用して回転角度を動的に計算するために使用されます。
.rotate-dynamic {
transform: rotate(calc(var(--rotation-angle) * deg));
}
上記の方法に加えて、様々なライブラリやツールを使用して、CSSでdivを回転させることができます。
これらのライブラリを使用すると、より複雑な回転アニメーションや、インタラクティブな回転効果を作成することができます。
回転方法を選択する際には、以下の要素を考慮する必要があります。
- 回転の複雑性
- パフォーマンス
- ブラウザの互換性
シンプルな回転の場合は、transform プロパティと rotate() 関数を使用するだけで十分です。より複雑な回転やアニメーションの場合は、ライブラリやツールを使用する方が良いでしょう。
html css
