Mengubah Sumbu putar Transform Rotate pada CSS

Hallo teman teman, pada kesempatan kali ini saya akan memberikan sebuah trik tentang HTML CSS, Trik ini  adalah trik untuk memanipulasi sebuah objek. trik ini merupakan tambahan untuk memanipulasi sumbu rotasi pada property transform.

Untuk mengubahnya kita perlu menggunakan property transform-origin dengan value seperti ini

transform-origin: sumbu-x sumbu-y sumbu-z;

 

Dengan mengacu pada struktur penulisan diatas dapat kita ketahui bahwa ada 3 sumbu, yaitu X, Y dan Z.

 

Ket:

X = Sumbu horizontal

Y = Sumbu Vertical

Z = Sumbu 3 Dimensi

 

untuk penerapannya kalian bisa coba buat html seperti ini

 

Sehingga ketika dicetak akan menjadi seperti ini

 

dimana nantinya persentase dari value transform origin akan menggeser sesuai sumbu yang ditentukan.

Baiklah teman-teman demikian artikel kali ini semoga-bermanfaat.