CSS3要素の2D平面変換・属性変換の実装方法について

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も許容されます)

.demo {    ......
    transform: translateX(100px) translateY(200px); /*改*/}

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

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

回転変換rotate

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

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

.demo {    ......
    transform: rotate(30deg);}

transform-origin: 50% 50% 0;その結果、要素は時計回りに 30°回転します
ただし、要素のデフォルトの回転中心は要素の中心です変換中心を変更するには、transform-origin 属性を使用できますたとえば、要素を左上の頂点に沿って回転させたいとします

.demo {    ......
    transform: rotate(30deg);    transform-origin: 0 0; /*增*/}

transform-origin の 3 つのパラメータは、x 軸距離 (x 軸)、y 軸距離 (y 軸)、z 軸距離 ( z 軸) デフォルトの形式は 長さとパーセンテージに加えて、オプションの x 軸の値には左、中央、
右が含まれます y- 長さとパーセンテージに加えて、軸には

top

、center、

bottom

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

では使用できません

スケール変換スケール

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

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

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

.demo {    ......
    transform: scale(2,2);}

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

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

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

.demo {    ......
    transform: scaleX(2) scaleY(3); /*改*/}

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

傾斜変換スキュー

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

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

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

.demo {    ......
    transform: skew(10deg,20deg);}

同等です

.demo {    ......
    transform: skewX(10deg) skewY(20deg); /*改*/}

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

行列変換行列

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

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

よくわかりません

---

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

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

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

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