CSS プロパティ transform

CSS プロパティ transform: 要素を変幻自在に操る

**概要:** この記事では、CSS の transform プロパティについて詳しく解説します。基本的な構文、よく使われる変形関数、そして実際の適用例を通して、Webページ要素の変形をマスターするための手助けをします。

**キーワード:** CSS, transform, 変形, translate, rotate, scale, skew, matrix, ウェブページエフェクト

一、transform とは: ウェブページ要素の変身魔法

transform プロパティを使うと、HTML 要素を回転、拡大縮小、傾斜、平行移動といった2次元または3次元の空間変換ができます。これにより、ウェブページに豊かな視覚効果を加えることができます。

基本的な構文


transform: none | <transform-function> [ <transform-function> ]*;
  • none: 何の変形も適用しません。これがデフォルト値です。
  • <transform-function>: 1つ以上の変形関数を指定します。複数の関数を指定する場合は空白で区切り、記述された順に適用されます。

二、よく使われる変形関数: 多彩な視覚効果を実現する

1. 平行移動 translate(): 要素の位置を自在に操る

translate() 関数は、要素を移動するために使用します。X軸、Y軸、またはその両方に対して移動できます。

構文


transform: translate(tx, ty);
transform: translateX(tx);
transform: translateY(ty);

パラメータ

  • tx: 水平方向の移動量を表します。長さの値またはパーセンテージで指定します。
  • ty: 垂直方向の移動量を表します。長さの値またはパーセンテージで指定します。

コード例


<div class="box">移動</div>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transform: translate(50px, 20px); /* 右に50px、下に20px移動 */
  }
</style>

2. 拡大縮小 scale(): 要素の大きさを自由自在に操る

scale() 関数は、要素を拡大縮小するために使用します。要素のサイズを大きくしたり、小さくしたりできます。

構文


transform: scale(sx, sy);
transform: scaleX(sx);
transform: scaleY(sy);

パラメータ

  • sx: 水平方向の拡大縮小率を表します。1は等倍、1より大きいと拡大、1未満だと縮小になります。
  • sy: 垂直方向の拡大縮小率を表します。

コード例


<div class="box">拡大縮小</div>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    transform: scale(1.5, 0.8); /* 水平方向に1.5倍に拡大、垂直方向に0.8倍に縮小 */
  }
</style>

3. 回転 rotate(): 要素を回転させる

rotate() 関数は、要素を回転させるために使用します。回転角度を設定できます。

構文


transform: rotate(<angle>);

パラメータ

  • <angle>: 回転角度を表します。単位はdeg (度)、rad (ラジアン)、turn (回転数) のいずれかを使用できます。

コード例


<div class="box">回転</div>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    transform: rotate(45deg); /* 時計回りに45度回転 */
  }
</style>

4. 傾斜 skew(): 要素に立体感を出す

skew() 関数は、要素を傾斜させるために使用します。要素をX軸またはY軸に沿って傾斜させることができます。

構文


transform: skew(ax, ay);
transform: skewX(ax);
transform: skewY(ay);

パラメータ

  • ax: X軸に沿って傾ける角度を表します。単位は deg (度) です。
  • ay: Y軸に沿って傾ける角度を表します。単位は deg (度) です。

コード例


<div class="box">傾斜</div>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: lightsalmon;
    transform: skew(20deg, 10deg); /* X軸に20度、Y軸に10度傾ける */
  }
</style>

5. 行列 matrix(): 高度な変形操作

matrix() 関数は、より汎用的な変形関数で、2x3の行列を使用して任意の2次元変換を記述します。これには、平行移動、回転、拡大縮小、傾斜などが含まれます。

構文


transform: matrix(a, b, c, d, tx, ty);

パラメータ

6つのパラメータはそれぞれ行列の6つの要素に対応しており、具体的な意味は複雑なため、関連ドキュメントを参照してください。

6. 3D 変形関数: ウェブページに立体的な空間を

上記の2次元変形関数に加えて、transform プロパティは translate3d()、scale3d()、rotate3d() などの一連の3次元変形関数をサポートしています。これらの関数を使用すると、より豊かで立体的なエフェクトを実現できます。

三、transform の活用例: 魅力的なウェブページエフェクトを作成する

transform プロパティは、ウェブデザインにおいて幅広く活用されています。例えば、以下のような例が挙げられます。

  • **アニメーション効果の作成:** transition プロパティや animation プロパティと組み合わせることで、滑らかなトランジション効果や動的なアニメーション効果を実現できます。
  • **画像ホバー効果の実装:** マウスホバー時に transform プロパティを使用して画像のサイズ、角度、位置を変更することで、ユーザーの目を引くインタラクティブな効果を作成できます。
  • **ウェブページ要素のレイアウト:** transform プロパティを利用することで、要素の位置やサイズをより柔軟に制御し、特殊なレイアウトを実現できます。

四、まとめ

transform プロパティは、CSS において非常に強力なプロパティであり、豊富な変形関数を提供することで、ウェブページ要素の位置、サイズ、角度、形状を簡単に制御し、多種多様な視覚効果を生み出すことができます。 transform プロパティをマスターすることで、ウェブデザインの可能性が無限に広がります。

transform に関するQ&A

Q1: transform プロパティと position プロパティの違いは何ですか？

A1: transform プロパティは要素の外観を変形させるもので、要素のドキュメント上の位置には影響しません。一方、position プロパティは要素の配置方法を指定するもので、要素のドキュメント上の位置を変更します。

Q2: transform プロパティを適用した要素の子要素にも変形は適用されますか？

A2: はい、transform プロパティは継承されるため、子要素にも適用されます。子要素に変形を適用したくない場合は、子要素に対して transform: none; を指定する必要があります。

Q3: transform プロパティを使用したアニメーションは、パフォーマンスに影響しますか？

A3: transform プロパティを使用したアニメーションは、一般的に GPU で処理されるため、JavaScript を使用したアニメーションよりも滑らかに動作し、パフォーマンスへの影響も少ないです。ただし、複雑な変形や多数の要素に適用する場合は、パフォーマンスに注意する必要があります。