CSS3のtranslate属性の詳細な紹介

translate 属性 は、translate() メソッドを通じて要素を現在の位置から指定された位置に移動できます。

translate() メソッドを通じて、指定された left (x 座標) および top (y 座標) の位置パラメータに従って、要素が現在の位置から移動します:

value translation(50px,100px) Move左からの要素 横に 50 ピクセル、上から 100 ピクセル移動します。

rotate() メソッド

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

値rotate(30deg)は要素を時計回りに30度回転させます。

scale() メソッド

scale() メソッドを使用すると、指定された幅 (X 軸) と高さ (Y 軸) パラメーターに従って要素のサイズが増加または減少します。

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

skew() メソッド

skew() メソッドを使用すると、指定された水平線 (X 軸) と垂直線 (Y 軸) のパラメーターに従って、要素が指定された角度だけ反転されます:

value skew(30deg, X 軸を中心に 20 度) 軸は要素を 30 度、Y 軸を中心に 20 度反転します。

matrix() メソッド

matrix() メソッドは、すべての 2D 変換メソッドを組み合わせます。

matrix() メソッドは 6 つのパラメーターを受け取り、要素の回転、拡大縮小、移動、傾斜を可能にする数学的な 関数 を含みます。

新しい変換プロパティ

以下の表には、すべての変換プロパティがリストされています:

transform は、要素に 2D または 3D 変換を適用します。

transform-origin を使用すると、変換された要素の位置を変更できます。

2D Transform メソッド

matrix(n,n,n,n,n,n) は、6 つの値の行列を使用して 2D 変換を定義します。

translate(x,y) は、X 軸と Y 軸に沿って要素を移動する 2D 変換を定義します。

translateX(n) は、X 軸に沿って要素を移動する 2D 変換を定義します。

translateY(n) は、Y 軸に沿って要素を移動する 2D 変換を定義します。

scale(x,y) は、要素の幅と高さを変更する 2D スケーリング変換を定義します。

scaleX(n) は、要素の幅を変更する 2D スケーリング変換を定義します。

scaleY(n) は、要素の高さを変更する 2D スケーリング変換を定義します。

rotate(angle) は 2D 回転を定義し、パラメータで角度を指定します。

skew(x-angle,y-angle) は、X 軸と Y 軸に沿った 2D スキュー変換を定義します。

skewX(angle) は、X 軸に沿った 2D スキュー変換を定義します。

skewY(angle) は、Y 軸に沿った 2D スキュー変換を定義します。

入門書を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 related Reading：css3で変換属性を使用するためのチュートリアルCSS3フォントで火炎効果を達成するためのcss3のボーダーイメージ属性の詳細な紹介

以上がCSS3のtranslate属性の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。