CSS2D変換

index.html

<div><p>This is a box that has been scaled.</p></div>

styles.css

div {
	transform: scale(1.5, 1.5);
	background-color: lightblue;
	border: 3px solid black;
}

タグの背景が水色で、幅が3pxの黒一色の境界線である必要があることを指定しています。また、scale（）メソッドを使用して、ボックスを元のサイズの1.5倍に拡大しました。

これは、2つのボックスのサイズを比較した画像です。最小のボックスにはscale（）値がなく、最大のボックスのscale（）は1.5です。

テキストを含む最大のボックスThis is a box that has been scaled. 元の箱の1.5倍の大きさです。

scaleX（）変換

scaleX() 変換を使用すると、要素の幅を増減できます。 scaleX（）変換の構文は次のとおりです。

transform: scaleX(xValue);


xValueパラメータは、要素の幅をスケーリングする量です。幅を1.6倍に増やしたいボックスがあるとします。次のコードを使用して、このボックスのサイズを大きくすることができます。

index.html

<div><p>This is a box that has been scaled.</p></div>

styles.css

div {
	transform: scaleX(1.5);
	background-color: lightblue;
	border: 3px solid black;
}

私たちのコードは次を返します：

[Code result here]


この例では、ボックスの幅が元の幅の1.5倍になっています。

scaleY（）変換

scaleY() 変換を使用すると、要素の高さを増減できます。 scaleY（）はscaleX（）と同じように機能しますが、要素の幅に影響を与える代わりに、scaleY（）は要素の高さを変更します。

ボックスの高さを現在の高さの半分に減らしたいとします。このコードを使用してこれを行うことができます。

index.html

<div><p>This is a box that has been scaled.</p></div>

styles.css

div {
	transform: scaleY(0.5);
	background-color: lightblue;
	border: 3px solid black;
}

私たちのコードは次を返します：

[Code result here]


このコードでは、ボックスの高さ（y軸で表される）を0.5倍に縮小しています。言い換えれば、私たちの箱は元の高さの半分です。

skew（）変換

skew() 変換は、指定された角度だけx軸とy軸に沿って要素を傾斜させます。

スキュー（）メソッドの構文は次のとおりです。

transform: skew(xValue, yValue);


xValueは、要素がx軸上でどれだけ歪む必要があるかを示し、yValueは、要素がy軸上でどれだけ歪まれる必要があるかを示します。両方の値は度で表す必要があります。

yValueの値が指定されていない場合、y軸にスキューは適用されません。

ボックスをx軸で10度、y軸で15度傾斜させたいとします。このコードを使用してこれを行うことができます。

index.html

<div><p>This is a box that has been skewed.</p></div>

styles.css

div {
	transform: skew(10deg, 15deg);
	background-color: lightblue;
	border: 3px solid black;
}

私たちのコードは次を返します：

この例では、ボックスをx軸で10度、y軸で15度傾斜させています。

skiwX（）およびskewY（）変換

scale()のように メソッド、skew() 要素のx軸またはy軸のいずれかを横切って要素を傾斜させるために使用される2つのサブメソッドが付属しています。

X軸のみを横切って要素を傾斜させるには、skewX（）メソッドを使用できます。このメソッドの構文は次のとおりです。

transform: skewX(xValue);


xValueは、要素がスキューされるx軸上の度数です。

Y軸を横切って要素を傾斜させるには、skewY（）メソッドを使用できます。スキューY（）メソッドの構文は次のとおりです。

transform: skewY(yValue);


したがって、要素をY軸上で10度傾斜させたい場合は、次のコードを使用できます。

div {
	transform: skewY(10deg);
}

matrix（）変換

matrix() 変換は、要素に対してすべての2DCSS変換を実行します。したがって、matrix（）を使用して、平行移動、回転、スケーリング、およびスキュー変換を適用できます。

matrix（）関数は、要素に変換を適用できるようにする6つのパラメーターを受け入れます。このメソッドの構文は次のとおりです。

変換：matrix（scaleX（）、skewY（）、skewX（）、scaleY（）、translateX（）、translateY（））;

次の変換を使用するボックスを作成したいとします。

• 1のX軸の目盛り。
• Y軸の10度のスキュー。
• X軸の10度のスキュー。
• Y軸の1.25の目盛り。
• X軸上で25px移動（「移動」）します。
• Y軸上で25px移動します。

これらの変換のそれぞれを個別に指定できます。ただし、そうすると、多くの個別の変換を作成する必要があります。代わりに、matrix（）メソッドを使用して、1行のコードを使用してこれらの変換を記述できます。

前述の変換を使用してボックスを作成するために使用できるコードは次のとおりです。

index.html

<div><p>This is a box that has been skewed.</p></div>

styles.css

div {
	transform: matrix(1, 10, 10, 1.25, 25, 25);
	background-color: lightblue;
	border: 3px solid black;
}

私たちのコードは次を返します：

[Code result here]


このコードでは、スキュー、スケール、および変換変換をボックスに適用しました。これは、matrix（）メソッドを使用し、前に指定した値を渡すことによって実現しました。

結論

transformプロパティは、CSSの要素に変換を適用するために使用されます。 CSSは、Web要素の変換に使用される、スキュー、スケール、回転、変換など、多数の2D変換を提供します。

このチュートリアルでは、例を参照して、2DCSS変換の基本について説明しました。これで、プロのWeb開発者のように独自の2D変換を作成する準備が整いました。