CSS3 memberikan banyak pilihan bagi developer untuk menggali lebih dalam & mengeksplor imajinasi kita. Sama halnya dengan style properties yang akan kita bahas sekarang, transformation.
Trans.. what?
Transformation, atau transformasi dalam bahasa Indonesia, yaitu cssproperties yang berfungsi merubah rupa (bentuk & sifat) HTML element dalam bidang 2 dimensi atau 3 dimensi. Transformasi sering digunakan untuk memindahkan, mengecilkan elemen, atau merubah koordinatnya. Memang sedikit membingungkan kalau tidak langsung nyebur ke text editor, apalagi istilah ini sering tertukar dengan kawannya, transition. Transformation, seperti yang telah kita obrolkan barusan, berbeda dengan transition dimana Transition berfungsi membuat animasi dengan perantara 2 state(kondisi awal dan akhir).
Lagi lagi kotak
HTML disusun dari rangkaian segi empat. Seperti biasa, kamu bisa menghiasnya dengan style favorit; rounded di setiap ujungnya, text cerah, dan sedikit shading cantik sehingga terlihat melayang. But, it’s still there, di atas permukaan berupa, lagi-lagi, segi empat. Segi empat yang sama yang dibuat oleh designers dengan software andalannya, e.g. Photoshop, yang dapat merubah bentuknya, besarnya, arahnya, dan lainnya.
Dengan menggunakan modul CSS3 2D, kita dapat mendesain grafis tanpa repot-repot kembali menggunakan software tambahan. Fungsi dasar seperti rotating, skewing, dan scaling sudah disediakan. Jadi, bagi kamu yang tidak terlalu familiar dengan design software, dont panic, you also can do it here, much easier trust me.
Contoh sederhana transfomasi CSS3
Gimana caranya?
Gampang, Transformation diaktifkan dengan menggunakan transform property yang terdiri dari nama dan nilai fungsinya. Seperti ini:
[css]transform: function(values);[/css]
Bagian function, bisa kamu ubah-ubah dengan nama transform properties yang kamu inginkan. Untuk lebih jelas nanti akan kita bahas di bawah, atau kamu bisa menggayuh lebih dalam di sini. Untuk bagian values, kamu bisa ganti dengan nilai yang kamu inginkan.
Hal yang harus diperhatikan, properties function memakai vendor-prefix untuk mengatasi masalah cross browser. Sampai saat tulisan ini saya ketik, transfom sempurna digunakan;
Tanpa Prefix : Firefox, IE10, Opera 12 tanpa prefix.
Prefix -webkit: Chrome, Safari dan Opera 15+ memakai prefix -webkit, seperti ini:
[css]-webkit-transform: function(values);[/css]
And Finally, IE9 support basic 2D transformation dengan menambahakan prefix -ms.
[css]-ms-transform: function(values);[/css]
Tapi, yauda la ya, beberapa bulan lagi IE9 fixed dead dan dikenang penggunanya.
Penggunaan vendor-prefix sangatlah rentan dan tidak sempurna, apalagi apabila transformation dikombinasikan dengan efek animasi. Solusinya, kamu harus sabar menunggu sebentar saja dan terus berdoa bersama tim browser secepatnya mengaplikasikan standard form transformation, atau kamu bisa ganti efek yang serupa dengan properties lain.
Document Flow
Penting diketahui bahwa mengaplikasikan tranformation pada suatu elemen, tidak mempengaruhi sama sekali pada document flow. Space yang memang dibutuhkan saat membuat elemen transformation tetap ada disana. Walaupun kamu kecilkan elemen yang kamu maksud, atau hilangkan, atau dibuat di belakang semua elemen, tetap space itu berada di tempatnya.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon