Halo teman-teman pada postingan kali ini saya akan mengenalkan Fungsi Property transform() Pada CSS.Property transform() memungkinkan teman-teman untuk mengubah elemen dalam ruang dua dimensi atau tiga dimensi. Menggunakan transformasi, elemen dapat diputar dan / atau ditingkatkan dalam dua atau tiga dimensi ruang. Secara khusus, transformasi properti mengubah sistem koordinat dari elemen, sehingga mengakibatkan transformasi elemen dalam ruang.

Property transform() diambil sebagai nilai daftar mengubah fungsi (lihat bagian Nilai di bawah) atau tidak. Sistem koordinat dari elemen diubah diubah oleh nilai transformasi akhir yang diperoleh dengan mengubah setiap fungsi dalam daftar untuk matriks yang sesuai, dan kemudian mengalikan matriks.

Dinilai untuk mentransformasikan, selain hasil tidak dalam penciptaan kedua konteks dan blok yang berisi. Ini berarti bahwa elemen berubah bertindak sebagai blok yang berisi untuk keturunan diposisikan tetap.

matriks transform() yang digunakan untuk menerapkan transformasi ke elemen juga dipengaruhi oleh nilai properti transformasi asal yang, seperti namanya, digunakan untuk menentukan asal dari transformasi-yang asal asal elemen sistem koordinat pada saat transformasi.

Koordinasi Sistem

Setiap elemen dalam CSS memiliki sistem koordinat yang berasal di sudut kiri atas unsur ini dikenal sebagai awal sistem koordinat.

Bila teman-teman menggunakan transformasi, asal sistem koordinat dipindahkan ke pusat elemen. Hal ini karena nilai default properti transform() asalnya adalah 50%-50%, yang diterjemahkan asal ke pusat elemen. Setelah itu, semua transformasi yang diterapkan pada elemen berdasarkan posisi baru dari sistem koordinat.

Sistem awal koordinat dan sistem koordinat saat transformasi CSS digunakan dengan standar transform-origin value. Untuk pengenalan berikutnya tentang property transform() pada CSS akan dilanjutkan pada postingan selanjutnya. Semoga bermanfaat.