Membahas Property Transform Scale Pada CSS3

Halo teman teman pada bagian ini kita masih belajar tentang property CSS3. Kali ini kita akan membahas mengenai property yang dinamakan transform. Jadi transform ini digunakan untuk dapat memanipulasi format atau bentuk visual dari elemen HTML yang kita miliki. Format visualnya ada beberapa yakni bisa ukuran, bisa bentuk dari elemennya atau mengubah posisi elemennya. Pada bagian ini kita akan melihat apa saja yang dapat kita lakukan dengan property transform ini. Property transform ini melakukan transformasi 2 dimensi dan 3 dimensi. Khusus untuk artikel kali ini yang akan kita bahas hanya mengenai transformasi 2 dimensi saja. Berikut ini bentuk sederhana penulisannya

propertynya yakni transform lalu nanti kita bisa tuliskan fungsi transformasinya mau apa. Perlu diingat property transform ini masih dalam pengembangan jadi mungkin saja teman teman membutuhkan vendor prefix didepannya. Ini beberapa fungsi yang dapat kita coba. Ada empat yang bisa teman teman gunakan Pertama kita bisa lakukan scale yaitu untuk memperbesar dan memperkecil elemen yang kita miliki. Kedua teman teman bisa gunakan rotate untuk merotasi atau memutar elemenya berapa derajat. Ketiga ada fungsi skew atau membuat elemenya menjadi miring atau condong dan yang terakhir translate adalah mengubah posisi. Nah sekarang kita akan coba implementasikan ke halaman webnya. Berikut ini kode HTML sederhananya sebagai berikut

dan kita berikan sedikit style dengan memberikan lebarnya dan tinggi boxnya yang akan kita lakukan adalah merubah atau mentransformasi elemen box tersebut Ketika mouse menyorot elemen boxnya. Kita akan menuliskan transform scale(angka) pada bagian hovernya

agar hasilnya pergerakkannya lebih halus maka kita berikan property transition pada bagian boxnya sebagai berikut

Yang artinya perbesar ukuranya boxnya 2 kali lipat dari ukuran aslinya. Tapi ketika saya masukan nilai 0.5 maka boxnya akan lebih kecil dari ukuran aslinya ketika boxnya dihover. Teman teman juga bisa memberikan dua parameter didalam fungsi scalenya

sumbu x akan membesar satu setengah kali lipat sedangkan sumbu y atau ukuran secara verticalnya itu akan memperbesar 2 kali lipat. Atau penulisannya bisa gunakan satu persatu scaleX untuk memberikan nilai sumbu x dan scaleY untuk sumbu y berikut penulisannya

maka hasilnya tetap sama saja. Itu dia yang bagian pertama yang menjelaskan fungsi scale untuk transformasi elemen HTML yang kita miliki selamat mencoba dan terima kasih.