CSS Transform を使用して要素を変換する

CSS での Transform の使用法

CSS の Transform プロパティは、HTML 要素の移動、回転、拡大縮小、傾斜などの操作を実行できる非常に強力なツールです。要素の外観を劇的に変更し、Web ページをよりクリエイティブでダイナミックにすることができます。この記事では、Transform のさまざまな使用方法を詳しく紹介し、具体的なコード例を示します。

1. 移動 (Translate)

移動とは、要素を x 軸と y 軸に沿って指定された距離だけ移動することを指します。その構文は次のとおりです。
transform: translation(x, y);
x と y は、水平方向と垂直方向の移動値であり、正の数 (右または下) または負の数 (左または上））。以下に例を示します。

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  transform: translate(50px, 100px);
}

このコードは、幅と高さが 200 ピクセルの赤い四角形を、水平方向に右に 50 ピクセル、垂直方向に 100 ピクセル移動します。

2. 回転

回転とは、回転中心を中心に要素を回転させることを指します。その構文は次のとおりです。
transform:rotate(angle);
angle は回転角度で、正の数 (時計回りの回転) または負の数 (反時計回りの回転) を指定できます。以下に例を示します。

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  transform: rotate(45deg);
}

このコードは、幅と高さが 200px の青い正方形を時計回りに 45 度回転します。

3. スケール

スケールとは、指定された比率に従って要素のサイズを調整することを指します。その構文は次のとおりです。
transform:scale(x, y);
x と y は水平方向と垂直方向のスケーリング率で、1 未満の数値 (ズームイン) または数値を指定できます。 1 より大きい (ズームイン)。以下に例を示します。

.box {
  width: 200px;
  height: 200px;
  background-color: green;
  transform: scale(0.5, 2);
}

このコードは、幅と高さが 200px の緑色の正方形を、水平方向では元のサイズの半分に、垂直方向では元のサイズの 2 倍に縮小します。

4. スキュー

スキューとは、x 軸と y 軸に沿って要素を傾けることを指します。構文は次のとおりです。
transform: skew(x-angle, y-angle);
x-angle と y-angle は、x 軸と y 軸の傾斜角であり、正の場合もあります。または負の数。以下に例を示します。

.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  transform: skew(30deg, -10deg);
}

このコードは、幅と高さが 200 ピクセルの黄色の正方形を、X 軸上で時計回りに 30 度、Y 軸上で反時計回りに 10 度傾けて作成します。

概要:

CSS の Transform は、移動、回転、拡大縮小、傾斜などの操作を通じて要素の形状と位置を変更できる非常に便利なプロパティです。この記事では、Transform のさまざまな使用法を紹介し、具体的なコード例を示します。 Transform 属性を柔軟に使用することで、より創造的で動的な Web ページ効果を作成できます。この記事があなたの学習や実践に役立つことを願っています。

以上がCSS Transform を使用して要素を変換するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。