Mengenal Fungsi Property transform() Pada CSS Part-2

Halo teman-teman pada postingan kali ini saya akan menlanjutkan pengenalan Fungsi Property transform() Pada CSS, yang sebelumnya sudah di bahas disini Mengenal Fungsi Property transform() Pada CSS Part-1

Jika teman-teman ingin memutar atau mencondongkan elemen menggunakan property transform(), teman-teman mengubah atau mencondong seluruh sistem koordinatnya bersama dengan itu, dan semua transformasi konsekuen akan diterapkan berdasarkan koordinat transformasi sistem baru. Inilah sebabnya mengapa urutan transformasi adalah perintah yang sangat penting-yang berbeda akan menghasilkan transformasi yang berbeda. Ini masuk akal mengingat bahwa transformasi yang diterjemahkan ke dalam matriks, dan mengalikan dua matriks dalam matematika akan memberikan hasil yang berbeda tergantung pada urutan matriks ini. Misalnya, x b tidak akan menghasilkan hasil yang sama seperti b x (kecuali salah satu dari mereka adalah matriks identitas).

Misalnya, jika teman-teman ingin menerjemahkan elemen dan memutar di posisi baru, teman-teman harus melakukannya dalam urutan disebutkan: menerjemahkan dan kemudian memutar. Jika teman-teman adalah untuk memutar elemen pertama, maka sistem koordinat akan diputar juga, dan kemudian menerjemahkan dalam arah tertentu mungkin tidak menghasilkan hasil yang teman-teman harapkan. Jika teman-teman adalah untuk memutar elemen dengan 90 derajat sekitar sumbu y, misalnya, maka sumbu x akan menunjuk ke arah bagian dalam layar, jauh dari teman-teman, jadi jika teman-teman menerapkan terjemahan maka di sepanjang sumbu x, elemen tidak akan bergerak ke kanan, ia akan bergerak ke dalam menjauh dari teman-teman. Jadi, penting untuk melihat keluar untuk urutan di mana teman-teman menulis transform fungsi dalam mengubah properti-fungsi pertama akan diterapkan pertama, dan fungsi terakhir akan diterapkan terakhir. Ini membantu untuk memvisualisasikan sistem koordinat dalam pikiran teman-teman sepanjang waktu untuk memastikan teman-teman tidak kehilangan titik.

Official Penulisan Syntax:

Notes:

<transform-list> adalah daftar satu atau lebih transformasi fungsi. Fungsi ini dijelaskan dalam bagian Nilai di bawah.

Demikian pengenalan tentang Fungsi Property transform() Pada CSS. Semoga bermanfaat.