Cara menggunakan transform dalam css

Atribut transform dalam CSS boleh memanipulasi penampilan elemen, termasuk: translate(): gerakkan elemen rotate(): putar elemen scale(): skala elemen skew(): herotkan matriks elemen(): gunakan matriks untuk mentakrifkan perspektif transformasi tersuai (): Cipta kesan 3D

Penggunaan transformasi dalam CSS

transformasi ialah alat yang berkuasa dalam CSS untuk memanipulasi penampilan elemen tanpa mempengaruhi saiz atau kedudukannya. Ia dilaksanakan melalui satu siri fungsi transformasi, termasuk: transform 是 CSS 中用于操纵元素的外观，而不会影响其尺寸或位置的一个强大的属性。它通过一系列变换函数来实现，包括：

平移、旋转和缩放

• translate()：移动元素。
• rotate()：旋转元素。
• scale()：缩放元素。

示例：

/* 将元素向右移动 50px */
transform: translate(50px);

/* 顺时针旋转元素 30 度 */
transform: rotate(30deg);

/* 将元素放大到原始尺寸的 2 倍 */
transform: scale(2);

复合变换

transform 属性可以组合多个变换函数，以实现更复杂的效果。

示例：

/* 同时向右移动元素 50px 并将其向上旋转 30 度 */
transform: translate(50px) rotate(30deg);

变形

transform 也可用于变形元素，从而创建视觉上独特的形状。

• skew()：扭曲元素。
• matrix()：使用矩阵定义自定义变换。

示例：

/* 向右倾斜元素 10 度 */
transform: skew(10deg);

/* 使用矩阵定义自定义变换 */
transform: matrix(1, 0, 0.5, 1, 0, 0);

透视

transform 中的透视属性允许创建 3D 效果，使元素看起来具有深度。

示例：

/* 设置元素的透视，使其看起来具有深度 */
transform: perspective(500px);

/* 沿 z 轴旋转元素 */
transform: perspective(500px) rotateZ(30deg);

注意：

• transform 不会影响元素在文档流中的位置。
• 浏览器对 transform 属性的支持程度有所不同。
• 使用 transform

Terjemahan, putaran dan penskalaan🎜🎜

• terjemah(): Gerakkan elemen. 🎜
• putar(): Putar elemen. 🎜
• skala(): Elemen skala. 🎜🎜🎜🎜Contoh: 🎜🎜rrreee🎜🎜Transformasi Kompaun🎜🎜🎜 Atribut transform boleh menggabungkan berbilang fungsi transformasi untuk mencapai kesan yang lebih kompleks. 🎜🎜🎜Contoh: 🎜🎜rrreee🎜🎜Transform🎜🎜🎜transformasi juga boleh digunakan untuk mengubah elemen, mencipta bentuk visual yang unik. 🎜
  • skew(): Herotkan elemen. 🎜
  • matriks(): Gunakan matriks untuk menentukan transformasi tersuai. 🎜🎜🎜🎜Contoh: 🎜🎜rrreee🎜🎜Perspektif🎜🎜🎜 Sifat perspektif dalam transform membenarkan penciptaan kesan 3D yang menjadikan elemen kelihatan mempunyai kedalaman. 🎜🎜🎜Contoh: 🎜🎜rrreee🎜🎜Nota: 🎜🎜
    • transformasi tidak menjejaskan kedudukan elemen dalam aliran dokumen. 🎜
    • Sokongan penyemak imbas untuk atribut transform berbeza-beza. 🎜
    • Prestasi mungkin terjejas apabila menggunakan transformasi, terutamanya apabila menganimasikan transformasi kompleks. 🎜🎜

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