CSS3 トランスフォーム(transform)機能の基本

2年 ago
光, 明
1 minute

CSS3変換(transform)とは、要素の形状、サイズ、位置、回転を変えるための技術です。これらのエフェクトは、一連の変換関数を適用することで実現されます。以下はCSS3変換の一般的な関数と使用方法です。

  1. translate() 関数は要素の位置を変えられ、2 つの引数を受け取ります.最初の引数は水平方向に平行移動する距離を表し、2 番目の引数は垂直方向に平行移動する距離を表します.例として、translate(100px, 50px) は右に 100 ピクセル、下に 50 ピクセル平行移動することを意味します
  2. スケール：scale()関数は要素の大きさを変更します。これはパラメータを1つ受け取り、それによってスケールの割合が表されます。例えば、scale(2)は要素を2倍に拡大することを表し、scale(0.5)は要素を半分に縮小することを表します。
  3. 回転: rotate()関数は要素を指定の角度回転します。引数として角度を受け取ります。例えば、rotate(45deg)は要素を時計回りに45度回転します。
  4. 傾く：skew() 関数は、要素を傾けます。2つのパラメータを受け取ります。1つ目のパラメータは、水平方向の傾斜角で、2つ目のパラメータは、垂直方向の傾斜角です。例えば、skew(30deg, 45deg) は、要素を水平方向に 30 度、垂直方向に 45 度傾けることを示します。
  5. 行列変換: matrix()関数は複合変換を行え、6つのパラメータを受け取り、2次元の変換行列の値を表します。例えば、matrix(1, 0, 0, 1, 100, 200)は、水平方向に100ピクセル、垂直方向に200ピクセル移動する移動操作を表します。

CSS3で用いられる変換の基礎的な使用方法をご紹介しました。これらの関数を組み合わせて使用することで、より複雑な変換効果を実現できます。CSS3の変換を適用する際にはtransformプロパティを使用して変換関数の値を指定できます（例：transform: translate(100px, 50px) scale(2) rotate(45deg)）。

bannerAds