Cara menggunakan transform dalam css

Harta transformasi dalam CSS digunakan untuk melakukan transformasi geometri pada elemen, termasuk terjemahan, penskalaan, putaran dan kecondongan. Penggunaannya termasuk: terjemahan: translateX(x)/terjemahY(y)/terjemah(x, y) penskalaan: skalaX(x)/skalaY(y)/skala(x, y) putaran: putaran(sudut)/putarX(sudut )/rotateY(angle)/rotateZ(angle) skew: skewX(angle)/skewY(angle)

Penggunaan transformasi dalam CSS

Atribut transformasi digunakan untuk melakukan transformasi geometrik , termasuk terjemahan, zum, putaran dan kecondongan. Ia menyediakan ciri yang berkuasa untuk mencipta pelbagai kesan visual seperti animasi, morphing dan herotan.

Penggunaan

Sintaks atribut transform adalah seperti berikut:

<code class="css">transform: <transform-function> [<transform-function>]...;</code>

Antaranya, <transform-function> boleh menjadi mana-mana fungsi transformasi berikut: <transform-function> 可以是以下任何变换函数：

• translateX(x)：平移元素沿 x 轴
• translateY(y)：平移元素沿 y 轴
• translate(x, y)：平移元素沿 x 和 y 轴
• scaleX(x)：缩放元素沿 x 轴
• scaleY(y)：缩放元素沿 y 轴
• scale(x, y)：缩放元素沿 x 和 y 轴
• rotate(angle)：旋转元素一个角度
• rotateX(angle)：沿 x 轴旋转元素
• rotateY(angle)：沿 y 轴旋转元素
• rotateZ(angle)：沿 z 轴旋转元素
• skewX(angle)：倾斜元素沿 x 轴
• skewY(angle)

>translateX(x) code>: Terjemahkan elemen sepanjang paksi x

terjemahY(y): Terjemahkan elemen sepanjang paksi y

terjemah(x, y): Terjemah elemen di sepanjang paksi x dan y

scaleX(x): skala elemen sepanjang paksi-x

scaleY(y): skala elemen di sepanjang paksi-y

skala(x, y): Skala elemen sepanjang paksi x dan y

putar(sudut): Putar elemen dengan sudut

putarX(sudut): Putar elemen sepanjang paksi-x

putarY(sudut): Putar elemen sepanjang paksi-y

rotateZ(sudut): Putar elemen di sepanjang paksi z

• skewX(sudut): Lencongkan elemen di sepanjang paksi x
• skewY(sudut) kod>: Lencongkan elemen di sepanjang paksi-y
• Penjelmaan berbilang

Atribut penjelmaan boleh menggabungkan berbilang fungsi penjelmaan, dipisahkan oleh ruang:

<code class="css">transform: translate(50px, 100px) rotate(45deg) scale(2);</code>

Unit gabungan

• ​​boleh termasuk nilai piksel
• ), peratusan (%) atau unit CSS lain.

🎜🎜Digunakan pada Elemen 🎜🎜🎜Atribut transformasi boleh digunakan pada mana-mana elemen HTML, tetapi selalunya digunakan untuk mencipta animasi dan kesan visual, seperti: 🎜🎜🎜Putar item menu 🎜🎜Skalakan butang untuk menunjukkan interaksi🎜 elemen sebagai tindak balas kepada pengguna Masukkan 🎜🎜Ubah imej untuk mencipta kesan unik🎜🎜🎜🎜Perhatikan bahawa sifat 🎜🎜🎜🎜menjejaskan kotak susun atur elemen, bukan kotak kandungannya. 🎜🎜Atribut transform disokong secara meluas dalam penyemak imbas moden, tetapi mungkin memerlukan awalan vendor dalam penyemak imbas lama. 🎜🎜

Atas ialah kandungan terperinci Cara menggunakan transform dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!