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

CSS3のscale3d()関数とは？3Dスケーリングの使い方を実例付きで解説

scale3d()関数とは

CSS3のscale3d()関数は、要素を3D空間上で拡大・縮小するために使用される変換関数です。X軸・Y軸・Z軸のそれぞれの方向について、引数として指定した数値に基づいてスケーリングが行われます。

基本的な書式は以下の通りです。

transform: scale3d(x, y, z);
  • x：横方向（X軸）の倍率
  • y：縦方向（Y軸）の倍率
  • z：奥行き方向（Z軸）の倍率

「1」が元のサイズの基準となります。たとえば「0.5」を指定すると半分のサイズに、「1.7」を指定すると1.7倍のサイズになります。また、負の値を指定すると、その軸方向に反転（ミラー）した状態でスケーリングされる点も覚えておくと便利です。

例1：scale3d(0.5, 1, 1.7) を指定する

次の例では、画像をX方向に0.5倍、Y方向に等倍（1倍）、Z方向に1.7倍へとスケーリングしています。

<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
   transform: scale3d(0.5, 1, 1.7);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p>Learn Apache Spark</p>
<img class="scale3d_img" src=
"https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg"
alt="Apache Spark">
</body>
</html>

出力結果

CSS3のscale3d()関数とは？3Dスケーリングの使い方を実例付きで解説

X方向のみが半分に縮小され、画像が横に潰れたように表示されます。Z方向の倍率は単体では見た目の変化が現れにくく、perspective（遠近効果）と組み合わせることで奥行きのある変形が確認できます。

例2：scale3d(-1.4, 0.4, 0.7) を指定する

続いて、負の値を含む別の例を見てみましょう。ここではX方向に-1.4倍、Y方向に0.4倍、Z方向に0.7倍を指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
   transform: scale3d(-1.4, 0.4, 0.7);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p>Learn Apache Spark</p>
<img class="scale3d_img" src=
"https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg"
alt="Apache Spark">
</body>
</html>

出力結果

CSS3のscale3d()関数とは？3Dスケーリングの使い方を実例付きで解説

X方向に負の値を指定しているため、画像は左右反転しながら1.4倍に拡大され、さらにY方向には0.4倍と大きく縮小されて表示されます。このように、scale3d()関数を使えば軸ごとに異なる倍率や反転を柔軟に組み合わせられます。

まとめ

scale3d()関数は、3D空間における要素の拡大縮小を軸単位で制御できる強力なCSS変換関数です。正の値で拡大・縮小、負の値で反転を表現でき、perspectiveプロパティと併用することで、より立体的な演出も可能になります。WebサイトのアニメーションやインタラクティブなUI制作にぜひ活用してみてください。

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

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

  2. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

    HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動