CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3のrotate3d()関数の使い方を徹底解説！3D空間での要素回転

CSSのrotate3d()関数は、要素を3D空間上で回転させるための変換関数です。X軸・Y軸・Z軸それぞれの回転ベクトルの成分と、回転角度をパラメータとして指定することで、自由な軸に沿った立体的な回転を実現できます。

rotate3d()関数の基本構文

rotate3d()関数は、以下のように4つの引数を受け取ります。

transform: rotate3d(x, y, z, angle);
  • x, y, z：回転軸を表すベクトルの各成分（数値で指定）
  • angle：回転角度（deg、rad、grad、turnなどの単位で指定）

例えば rotate3d(1, 1, 1, 45deg) と指定すると、X・Y・Zの3軸すべてに対して45度ずつ傾いた斜めの軸を中心に、要素が45度回転します。

サンプルコード1：画像を3D回転させる

まずは、画像要素にrotate3d()を適用する基本的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    transform: rotate3d(1, 1, 1, 45deg);
}
.skew_img {
    transform-origin: left;
    transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="demo" src=
"https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg"
alt="Numpy">
<img class="skew_img" src=
"https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg"
alt="Apache Spark">
</body>
</html>

実行結果

CSS3のrotate3d()関数の使い方を徹底解説！3D空間での要素回転

この例では、1つ目の画像が rotate3d(1, 1, 1, 45deg) によって斜めの軸を中心に45度回転しています。一方、2つ目の画像は比較用としてskew()関数による傾斜変換を適用したものです。

サンプルコード2：テキスト要素への適用

rotate3d()はテキストにも適用できます。次の例では、段落要素を回転させています。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    transform: rotate3d(1, 2, 0, 30deg);
    color: red;
    font-family: sans-serif;
    font-size: 30px;
}
.skew_img {
    transform-origin: left;
    transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p class="demo">Learn Apache Spark</p>
<img class="skew_img" src=
"https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg"
alt="Apache Spark">
</body>
</html>

実行結果

CSS3のrotate3d()関数の使い方を徹底解説！3D空間での要素回転

この例では rotate3d(1, 2, 0, 30deg) を指定しているため、X軸とY軸の成分を持つ軸（Z軸成分は0）を中心に、テキストが30度回転します。Y軸の成分が大きいため、縦方向への傾きが強く現れているのがポイントです。

まとめ

rotate3d()関数を使うことで、CSSだけで要素を任意の3D軸に沿って回転させることができます。単一の軸だけを回転させたい場合はrotateX()・rotateY()・rotateZ()を使う方法もありますが、複数の軸を組み合わせた立体的な回転表現にはrotate3d()が便利です。Webサイトのアニメーションやホバーエフェクトなど、インタラクティブな演出にぜひ活用してみてください。

  1. CSSのmatrix()関数とは？2D変換行列の使い方をサンプルコードで解説

    CSSのmatrix()関数は、同次2D変換行列（homogeneous 2D transformation matrix）を定義するために使用される関数です。引数には線形変換の値を指定することで、要素に対して拡大縮小・回転・傾斜・移動といった複数の変換を一度に適用できます。 matrix()関数の基本構文 matrix()関数は、以下のように6つの引数を受け取ります。 transform: matrix(a, b, c, d, e, f); 各引数の意味は次のとおりです。 a, d：水平方向・垂直方向の拡大縮小率 b, c：傾斜（スキュー）の度合い e, f：水平方向・垂直方向の移動量（ピ

  2. CSSのtranslate()関数とは？要素を移動させる方法を実例付きで解説

    CSSのtranslate()関数は、要素を水平方向・垂直方向に移動（再配置）するために使用される変換関数です。transformプロパティと組み合わせて使うことで、HTML要素を元の位置から任意の距離だけずらして表示できます。translate()関数の基本構文transform: translate(x軸の移動量, y軸の移動量);第1引数が水平方向（X軸）、第2引数が垂直方向（Y軸）の移動量を表します。値にはpxなどの絶対単位や、%（要素自身のサイズに対する割合）を指定できます。第2引数を省略した場合は、Y方向の移動量は0として扱われます。サンプルコード1：画像を右に50px移動するまず