CSS3 の形状変換を使用すると、ストレッチ、スケールなどを行うことができます

この記事では主に 2D 平面の変換について説明します
属性transform を変換できます
transform は変形を意味します
主に使用します関数、、次の関数があります

• translate()翻訳変換

• Scale () スケーリング変換

SKew ( ) 傾斜変換

matrix() 行列変換

transform-originは変換の中心を定義します

平行移動変換translate

translate()には2つのパラメータがあり、1つ目はx軸の相対変位です、2番目のパラメータはy軸の相対変位です

.demo { ...... transform: translate(100px, 200px); <-- }

ログイン後にコピー

またはtranslate()はtranslateX()とtranslateY()に分割できます

(小文字のtranslatex/yも許容されます)

これら2つは同等です、しかし非常に面倒

その結果、要素は100pxだけ右に移動し、200pxだけ下に移動します

回転変換rotate

rotate()には回転角度を表す'xxdeg'というパラメータがあり、

正の数値は時計回りに回転します。負の値は許可されます

transform-origin: 50% 50% 0;その結果、要素は時計回りに 30°回転します
ただし、要素のデフォルトの回転中心は要素の中心です 変換中心を変更するには、transform-origin 属性を使用できますたとえば、要素を左上の頂点に沿って回転させたいとします
transform-origin の 3 つのパラメータは、x 軸距離 (x 軸)、y 軸距離 (y 軸)、z 軸距離 ( z 軸)デフォルトの形式は 長さとパーセンテージに加えて、オプションの x 軸の値には左、中央、
右 が含まれますy- 長さとパーセンテージに加えて、軸には

top

、center、

bottom

も含まれます。
z軸のオプションの値は長さの値のみであり、当面は
2D変換

では使用できません

スケール変換スケール

要素のスケーリングとは、要素のサイズを変更する

2つのパラメータ、幅と高さのスケーリング倍率(単位なし)

scaleX()とscaleY()に分割することもできます

このようにして、要素の幅は2倍、高さは2倍になります

これがスケーリングの本当の意味であることに注意してください

これは、要素内にテキストがある場合、ストレッチ効果が生成されることを意味します
同等の形式は次のとおりです

transform-originを通じて変換中心を変更できます

傾斜変換スキュー

スキューは斜めの歪みの意味です

この関数は要素を線形に歪みます

x軸とy軸の歪み角の2つのパラメータもxxdegの形式です

同等です

transform-origin を介して変換中心を変更することもできます。これ以上詳しくは説明しません

行列変換行列
とても NB のように聞こえますが、実際には

は本当に非常に優れた NB です
行列変換はあまり使用されません、それはは上記すべての変換の基礎です

よくわかりません

---

人間として、数学の学生は本当に恥ずかしいです T^T

行列変換には 6 つのパラメータがあり、要素の回転、平行移動、傾き、スケーリングを制御できます
たとえば、次のコードは要素を 30 度回転させ、x 軸と y 軸をそれぞれ 20 ピクセルずつ平行移動しますそうです数学に興味がある場合は、Zhang Xinxu の記事ポータルをお勧めします

多分私は行列に関する記事を書くでしょう。将来は気まぐれに…今日話したいことは比較的簡単なので、写真は省略します3D変換関連属性–>ポータル

以上がCSS3要素の2D平面変換・属性変換の実装方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。