CSS3 2D変換

CSS3 2D Transforms

CSS3 Transforms

CSS3 Transforms では、要素を移動、拡大縮小、反転、回転、ストレッチすることができます。

それはどのように機能しますか?

変形効果を使用すると、要素の形状、サイズ、位置を変更できます。

2D または 3D 要素を使用して変換できます。

2D変換この章では、2D変換方法について学びます：

Translate（）

Rotate（）

scale（）

skew（）

matrix（）

translate（ ) メソッド

translate() メソッドは、左 (X 軸) と上 (Y 軸) の位置で指定されたパラメーターに従って、現在の要素の位置から移動します。

transform: translate(50px,100px);

変換値 (50px、100px) は、左の要素から 50 ピクセル、上から 100 ピクセルに移動されます。

rotate() メソッド

rotate() メソッドは、要素を指定された度だけ時計回りに回転します。負の値を指定すると、要素が反時計回りに回転します。

transform: rotate(30deg);

rotate value (30deg) 要素は時計回りに 30 度回転します。

scale() メソッド

scale() メソッドでは、幅 (X 軸) と高さ (Y 軸) のパラメーターに応じて要素のサイズが増減します。

transform: scale(2,4);

scale(2,4) は幅を元のサイズの 2 倍に変換します、高さは元のサイズの 4 倍になります。

skew() メソッド

skew() メソッド、この要素は水平 (X 軸) と垂直 (Y 軸) の線パラメーターに基づいて角度を与えます:

transform: skew(30deg,20deg);

skew(30deg,20deg) ) は X 軸の周りにあり、要素は Y 軸の周りに 20 度および 30 度あります。

matrix()メソッド

matrix()メソッドと2D変換メソッドが1つに統合されました。

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

matrix メソッドには、回転、スケーリング、移動 (平行移動)、傾斜関数を含む 6 つのパラメーターがあります。

次のセクション