Mengubah - Trik CSS

Anonim

The transformproperti memungkinkan Anda untuk visual memanipulasi elemen dengan miring, berputar, menerjemahkan, atau skala:

.element ( width: 20px; height: 20px; transform: scale(20); )

Bahkan dengan tinggi dan lebar yang dinyatakan, elemen ini sekarang akan diskalakan menjadi dua puluh kali ukuran aslinya:

Lihat penjelasan Pen Transform oleh CSS-Tricks (@ css-trick) di CodePen.

Memberikan fungsi ini dua nilai akan meregangkannya secara horizontal pada nilai pertama dan vertikal pada nilai kedua. Pada contoh di bawah, elemen sekarang akan berukuran dua kali lebarnya tetapi setengah tinggi elemen aslinya:

.element ( transform: scale(2, .5); )

Atau Anda bisa lebih spesifik tanpa menggunakan fungsi singkatan:

transform: scaleX(2); transform: scaleY(.5);

Tetapi scale()hanya satu dari banyak fungsi transformasi yang tersedia:

Nilai

  • scale(): Mempengaruhi ukuran elemen. Ini juga berlaku untuk font-size, padding, height, dan widthdari unsur, juga. Ini juga merupakan fungsi singkatan untuk scaleXdan scaleYfungsi.
  • skewX()dan skewY(): Memiringkan elemen ke kiri atau kanan, seperti mengubah persegi panjang menjadi jajaran genjang. skew()adalah singkatan yang menggabungkan skewX()dan skewYdengan menerima kedua nilai tersebut.
  • translate(): Memindahkan elemen ke samping atau ke atas dan ke bawah.
  • rotate(): Memutar elemen searah jarum jam dari posisinya saat ini.
  • matrix(): Fungsi yang mungkin tidak dimaksudkan untuk ditulis dengan tangan, tetapi menggabungkan semua transformasi menjadi satu.
  • perspective(): Tidak memengaruhi elemen itu sendiri, tetapi memengaruhi transformasi transformasi 3D elemen turunan, memungkinkan semuanya memiliki perspektif kedalaman yang konsisten.

Condong

/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )

Fungsi skewXdan skewYtransform memiringkan elemen dengan satu atau lain cara. Ingat: tidak ada properti singkatan untuk memiringkan elemen, jadi Anda harus menggunakan kedua fungsi tersebut. Pada contoh di bawah ini, kita dapat memiringkan persegi 100px x 100px ke kiri dan kanan dengan skewX:

Lihat penjelasan Pen Transform oleh CSS-Tricks (@ css-trick) di CodePen.

Sementara dalam contoh ini kita dapat memiringkan elemen secara vertikal dengan skewY:

Lihat penjelasan Pen Transform oleh CSS-Tricks (@ css-trick) di CodePen.

Sekarang mari kita gunakan skew()untuk menggabungkan keduanya:

Lihat
properti singkatan Pen skew () oleh CSS-Tricks (@ css-trick)
di CodePen.

Memutar

.element ( transform: rotate(25deg); )

Ini memutar elemen searah jarum jam dari posisi aslinya, sementara nilai negatif akan memutarnya ke arah yang berlawanan. Berikut adalah contoh animasi sederhana di mana kotak terus berputar 360 derajat setiap tiga detik:

Lihat penjelasan Pen Transform oleh CSS-Tricks (@ css-trick) di CodePen.

Kita juga bisa menggunakan rotateX, rotateYdan rotateZfungsi, seperti:

Lihat penjelasan Pen Transform oleh CSS-Tricks (@ css-trick) di CodePen.

Menterjemahkan

.element ( transform: translate(20px, 10px); )

Fungsi transformasi ini memindahkan elemen ke samping, atau ke atas dan ke bawah. Mengapa tidak menggunakan atas / kiri / bawah / kanan saja? Yah, terkadang agak membingungkan. Saya akan menganggapnya sebagai tata letak / pemosisian (bagaimanapun juga mereka memiliki dukungan browser yang lebih baik) dan ini sebagai cara untuk memindahkan hal-hal itu sebagai bagian dari transisi atau animasi.

Nilai ini akan berupa nilai panjang apa pun, seperti 10px atau 2.4em. Satu nilai akan memindahkan elemen ke kanan (nilai negatif ke kiri). Jika nilai kedua diberikan, nilai kedua itu akan menurunkannya (nilai negatif naik). Atau, Anda bisa lebih spesifik:

transform: translateX(value); transform: translateY(value);

Penting untuk diperhatikan bahwa sebuah elemen yang menggunakan transformtidak akan menyebabkan elemen lain mengalir di sekitarnya. Dengan menggunakan translatefungsi di bawah ini dan mendorong kotak hijau keluar dari posisi aslinya, kita akan melihat bagaimana teks di sekitarnya akan tetap pada tempatnya, seolah-olah kotak adalah elemen blok:

Lihat penjelasan Pen Transform oleh CSS-Tricks (@ css-trick) di CodePen.

Perlu juga dicatat bahwa translateperangkat keras akan diakselerasi jika Anda ingin menganimasikan properti itu, tidak seperti position: absolute.

Banyak nilai

Dengan daftar yang dipisahkan spasi, Anda dapat menambahkan beberapa nilai ke transformproperti:

.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )

Perlu diperhatikan bahwa ada urutan untuk melakukan transformasi ini, dalam contoh di atas, `skew` akan dilakukan terlebih dahulu dan kemudian elemen akan diskalakan.

Matriks

Fungsi matrixtransformasi dapat digunakan untuk menggabungkan semua transformasi menjadi satu. Ini seperti mengubah steno, hanya saja saya tidak percaya itu benar-benar dimaksudkan untuk ditulis dengan tangan. Ada alat di luar sana seperti Resolusi Matriks, yang dapat mengubah grup transformasi menjadi deklarasi matriks tunggal. Mungkin dalam beberapa situasi hal ini dapat mengurangi ukuran file, meskipun pengoptimalan mikro yang tidak ramah penulis seperti itu kemungkinan tidak sepadan dengan waktu Anda.

Bagi yang penasaran, ini:

rotate(45deg) translate(24px, 25px)

juga dapat direpresentasikan sebagai:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

Transformasi 3D

Sebagian besar properti di atas memiliki versi 3D-nya.

translate3d(x, y, z) translateZ(z)

Nilai ketiga dalam translate3datau nilai dalam translateZmemindahkan elemen ke arah pemirsa, menjauhi nilai negatif.

scale3d(sx, sy, sz) scaleZ(sz)

Nilai ketiga dalam scale3datau nilai dalam scaleZmempengaruhi penskalaan sepanjang sumbu-z (misalnya, garis imajiner yang keluar langsung dari layar).

rotateX(value) rotateY(value) rotate3d(x, y, z)

rotateXdan rotateYakan memutar elemen dalam ruang 3D di sekitar sumbu tersebut. rotate3dmemungkinkan Anda menentukan titik dalam ruang 3D untuk memutar elemen.

matrix3d(… )

Cara untuk mendeskripsikan transformasi 3D secara terprogram dalam kisi 4 × 4. Tidak ada yang akan pernah menulis salah satu dari ini, selamanya.

perspective(value)

Nilai ini tidak memengaruhi elemen itu sendiri, tetapi memengaruhi transformasi transformasi 3D elemen turunan, yang memungkinkan mereka semua memiliki perspektif kedalaman yang konsisten.

Informasi Lebih Lanjut

  • Dokumen MDN tentang transformasi dan penggunaan.
  • Dokumentasi David DeSandro tentang transformasi 3D
  • Safari Surfin: Transformasi 3D
  • Spesifikasi W3C pada transformasi CSS3
  • Pengantar transformasi 3D CSS

Dukungan Browser

Transformasi 2D

Chrome Safari Firefox Opera YAITU Android iOS
Apa saja 3.1+ 3.5+ 10.5+ 9+ 4.1+ Setidaknya 4

Transformasi 3D

Chrome Safari Firefox Opera YAITU Android iOS
10+ 4+ 12+ tidak ada 10+ 4.1+ 5+

Awalan vendor

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )