CSS3 Transformation. Hhm, transform what?


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 css properties 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.

Screen Shot 2013-09-08 at 8.15.48 PM

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. Untuk lebih kebayang kamu bisa lihat di sini.

Gimana? mudah kan. Kalau kamu makin courios, yok lanjut lebih dalam 2D Transformation Functions.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s