Mengubah - Trik CSS

Anonim

Properti transformini membolehkan anda memanipulasi elemen secara visual dengan memutar, memutar, menerjemahkan, atau menskalakan:

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

Walaupun dengan ketinggian dan lebar yang dinyatakan, elemen ini sekarang akan diperkecil hingga dua puluh kali ganda dari ukuran asalnya:

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

Memberi fungsi ini dua nilai akan meregangkannya secara mendatar oleh yang pertama dan secara menegak oleh yang kedua. Dalam contoh di bawah elemen sekarang akan dua kali lebar tetapi separuh ketinggian elemen asal:

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

Atau anda boleh menjadi lebih spesifik tanpa menggunakan fungsi singkatan:

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

Tetapi scale()hanya satu daripada banyak fungsi transformasi yang ada:

Nilai

  • scale(): Mempengaruhi ukuran elemen. Ini juga terpakai kepada font-size, padding, height, dan widthunsur juga. Ia juga berfungsi untuk fungsi scaleXdan scaleYfungsi.
  • skewX()dan skewY(): Memiringkan elemen ke kiri atau kanan, seperti mengubah segi empat tepat menjadi parallelogram. skew()adalah singkatan yang menggabungkan skewX()dan skewYdengan menerima kedua-dua nilai.
  • translate(): Menggerakkan elemen ke sisi atau ke atas dan ke bawah.
  • rotate(): Memutar elemen mengikut arah jam dari kedudukannya sekarang.
  • matrix(): Fungsi yang mungkin tidak dimaksudkan untuk ditulis dengan tangan, tetapi menggabungkan semua perubahan menjadi satu.
  • perspective(): Tidak mempengaruhi elemen itu sendiri, tetapi mempengaruhi perubahan transformasi elemen keturunan, membolehkan mereka semua mempunyai perspektif kedalaman yang konsisten.

Skew

/* 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 unsur satu cara atau yang lain. Ingat: tidak ada harta benda yang pendek untuk menyekat elemen, jadi anda perlu menggunakan kedua fungsi tersebut. Dalam contoh di bawah ini, kita dapat membelokkan persegi 100px x 100px ke kiri dan kanan dengan skewX:

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

Walaupun dalam contoh ini kita dapat memiringkan elemen secara menegak dengan skewY:

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

Sekarang mari kita gunakan skew()untuk menggabungkan keduanya:

Lihat hartanah Pen
skew () oleh CSS-Tricks (@ css-tricks)
di CodePen.

Putar

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

Ini memutar elemen searah jarum jam dari kedudukan asalnya, sementara nilai negatif akan memutarnya ke arah yang berlawanan. Berikut adalah contoh animasi mudah di mana kotak terus berputar 360 darjah setiap tiga saat:

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

Kami juga dapat menggunakan rotateX, rotateYdan rotateZfungsi, seperti:

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

Terjemahkan

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

Fungsi transformasi ini menggerakkan elemen ke sisi, atau ke atas dan ke bawah. Mengapa tidak hanya menggunakan bahagian atas / kiri / bawah / kanan? Ia kadang-kadang membingungkan. Saya akan menganggapnya sebagai susun atur / kedudukan (mereka tetap mempunyai sokongan penyemak imbas yang lebih baik) dan ini sebagai cara untuk memindahkan perkara-perkara tersebut sebagai sebahagian daripada peralihan atau animasi.

Nilai-nilai ini adalah nilai panjang apa pun, seperti 10px atau 2.4em. Satu nilai akan memindahkan elemen ke kanan (nilai negatif ke kiri). Sekiranya nilai kedua diberikan, nilai kedua akan memindahkannya ke bawah (nilai negatif naik). Atau, anda boleh mendapatkan spesifik:

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

Penting untuk diperhatikan bahawa elemen yang digunakan transformtidak akan menyebabkan unsur lain mengalir di sekelilingnya. Dengan menggunakan translatefungsi di bawah ini dan menjauhkan kotak hijau dari kedudukan asalnya, kita akan melihat bagaimana teks di sekitarnya tetap tetap di tempatnya, seolah-olah kotak itu adalah elemen blok:

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

Juga perlu diperhatikan bahawa translateperkakasan dipercepat jika anda ingin menghidupkan harta itu, tidak seperti position: absolute.

Pelbagai nilai

Dengan senarai yang dipisahkan ruang, anda boleh menambahkan beberapa nilai ke transformharta tanah:

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

Perlu diperhatikan bahawa terdapat urutan di mana transformasi ini akan dilakukan, dalam contoh di atas `skew` akan dilakukan terlebih dahulu dan kemudian elemen akan ditimbang.

Matrik

Yang matrixmengubah fungsi boleh digunakan untuk menggabungkan semua jelmaan menjadi satu. Ia seperti transform pendek, hanya saya tidak percaya ia benar-benar dimaksudkan untuk ditulis dengan tangan. Terdapat alat di luar sana seperti The Matrix Resolutions, yang dapat mengubah sekumpulan transformasi menjadi satu deklarasi matriks. Mungkin dalam beberapa keadaan ini dapat mengurangkan ukuran fail, walaupun pengoptimuman mikro yang tidak mesra pengarang seperti itu mungkin tidak sesuai dengan masa anda.

Untuk yang ingin tahu, ini:

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

juga boleh ditunjukkan sebagai:

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

Transformasi 3D

Sebilangan besar sifat di atas mempunyai versi 3D daripadanya.

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

Nilai ketiga masuk translate3datau nilai dalam translateZmemindahkan elemen ke arah penonton, nilai negatif akan hilang.

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

Nilai ketiga dalam scale3datau nilai masuk scaleZmempengaruhi penskalaan sepanjang paksi-z (contohnya garis khayalan yang keluar langsung dari skrin).

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

rotateXdan rotateYakan memutarkan elemen dalam ruang 3D di sekitar paksi tersebut. rotate3dmembolehkan anda menentukan titik dalam ruang 3D untuk memutar elemen di sekeliling.

matrix3d(… )

Kaedah untuk menerangkan transformasi 3D secara terprogram dalam grid 4 × 4. Tidak ada yang pernah menulis salah satu daripadanya.

perspective(value)

Nilai ini tidak mempengaruhi elemen itu sendiri, tetapi mempengaruhi perubahan transformasi 3D elemen keturunan, yang memungkinkan mereka semua mempunyai perspektif kedalaman yang konsisten.

Maklumat lanjut

  • Dokumen MDN mengenai transformasi dan penggunaan.
  • Dokumentasi David DeSandro mengenai transformasi 3D
  • Surfin 'Safari: Transformasi 3D
  • Spesifikasi W3C pada transformasi CSS3
  • Pengenalan kepada perubahan 3D CSS

Sokongan Penyemak Imbas

Transformasi 2D

Chrome Safari Firefox Opera IE Android iOS
Sebarang 3.1+ 3.5+ 10.5+ 9+ 4.1+ Sekurang-kurangnya 4

Transformasi 3D

Chrome Safari Firefox Opera IE Android iOS
10+ 4+ 12+ tiada 10+ 4.1+ 5+

Awalan vendor

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