CSS 3D Transformation


Kita sudah melewati 2 tahap awal, Basic Transformation dan 2D Transformation. Sekarang kita berada di bagian paling menarik dari transformation, Transformasi 3D. Sebelum masuk ke dalam properties apa saja yang bisa kita mainkan nanti, ada sedkit notes;

  1.  Di tulisan ini saya menulisakan bentuk standard prefix -webkit. Untuk prefix yang lain tidak saya sertakan di tulisan ini, tapi di dalam code demo saya sertakan.
  2. Lupakan sejenak IE9 kebawah. Transformation bisa diaplikasikan ke setiap browser lainnya.

Objek 3D dalam Layar 2D, Bisa?

Bisa. Dalam bentuk 2 dimensi, kita bermain dalam suatu bidang datar yang ditentukan dalam posisi horizontal (sumbu x) dan vertikal (sumbu y). Dalam bentuk 3 dimensi, selain kedua sumbu tadi kita punya sumbu z. Sumbu z memberikan kedalaman pada bidang yang kita miliki, sehingga kita bermain tidak dalam suatu bidang datar melainkan ruang.

Misal layar kita sekarang memiliki nilai z= 0, maka objek dengan z+ akan maju dari layar ke arah kamu dan objek dengan z- akan masuk ke dalam layar menjauhi kamu.  Apabila kita tambah properti perspective, maka objek akan semakin terlihat menghilang seiring jarak objek tersebut.

Ada beberapa poin penting yang harus kamu ketahui:

  1. Kita mentranformasi elemen 2 dimensi ke dalam 3 dimensi. Kotak HTML tetap datar & memiliki kedalaman nol. Walaupun kamu  lakukan scale element dalam arah z, pada dasarnya elemen tersebut tidak akan mengembang. Seperto lingkaran kamu scale tidak akan berubah menjadi silinder.
  2. Saat Transformasi 3D dilakukan pada suatu elemen, semua elemen di dalamnya mengikuti.
  3. Memainkan Transformasi 3D sangat lah mudah. Elemen bisa saja tiba-tiba hilang entah dibalik layar ataupun keluar area layar. Saya sarankan untuk meng-undo redo coding kamu saat keadaan menjadi lebih buruk.

Depth

Kita mulai dengan satu langkah sederhana:

[html]<div id="container">

<div id="box1"> BOX 1</div>

<div id="box2"> BOX 2</div>

<div id="box3"> BOX 3</div>

</div>[/html]

Kita memiliki elemen terluar berupa container yang berisi 3 buah box. Saya beri sedikit style agar visualisasi memahami ini lebih baik.  Kontainer terluar ini tidak terlalu harus dibuat saat ini, namun nanti akan dilakukan sedikit rotasi pada seluruh box sehingga memberi visualisasi yang lebih baik.

Pertama, kita akan aplikasikan translateZ pada ketiga box. Kita buat box 2 dan 3 masuk ke dalam menjauhi kita. Seperti ini:

[css]#box2

{transform: translateZ(-300px);}

#box3

{transform: translateZ(-600px);}[/css]

Kamu bisa lihat hasilnya di sini.

Screen Shot 2013-09-08 at 8.11.05 PM

Hasilnya seperti ini. Hhm, bukan yang kita harapkan. Dibayangan kita karena nilai negatif diberikan sehingga box2 dan 3 seharusnya menjauhi kita dan box 3 yang paling jauh. Yang terjadi sebaliknya, box 3 lah yang paling di depan di antara yang lain. Kenapa ya? Ini disebabkan oleh properti transform-style yang secara default memiliki nilai flat. Untuk mengatasinya, kita ubah menjadi preserve-3d sehingga elemen kita memiliki kedalaman.

[css]#container

{transform-style: preserver-3d;}[/css]

Kamu bisa lihat hasilnya live di sini.

Screen Shot 2013-09-08 at 8.14.10 PM

Ehm ngomong-ngomong, sayang sekali di IE10 transform-style tidak bisa digunakan, jadi box3 akan tetap di atas box lainnya. Ya berharap dan berdoa bersama saja bagi kamu penggemar IE, semoga Microsoft mengatasi masalah ini pada IE11. Ok, diluar IE10, kita semakin dekat dengan puncak kemenangan kita, selanjutnya Let’s get some perspective !

Perspektif

Di demo kita sebelumnya, kita seakan berada di depan panggung dan melihat ketiga box itu. Sama besar dan terlihat menumpuk satu dan lainnya. Itu karena ketiga objek tersebut segaris dengan kita yang berada di depan panggung. Coba kita beri perspektif pada pandangan kita.

[css]#container

{transform: rotateX(-20deg) rotateY(-40deg);}[/css]

Kamu bisa lihat hasilnya live di sini.

Screen Shot 2013-09-08 at 8.15.48 PM

Yap, sekarang kita seperti duduk pada area sebelah kanan dan melihat panggung di depan. Terlihat tidak hanya satu box, namun 3 box yang berbaris cantik seperti paskibraka kita jaman sekolah dulu.

Kita juga bisa menambahkan sedikit efek perspektif sehingga terlihat jelas objek mana yang terletak paling jauh.

[css]#container

{transform: rotateX(-20deg) rotateY(-40deg) perspective(1300px);}[/css]

Hasilnya pun seperti ini, terlihat objek yang paling jauh lebih kecil dari objek di depannya.

Screen Shot 2013-09-08 at 8.38.48 PM

semakin besar nilai perspective function yang dimasukkan semakin jauh jarak kita melihat elemen tersebut. Bayangkan jika kita berada di kelas VIP pada suatu konser musik klasik, kita berada pada nilai perspective = 0. Apabila dinaikkan menjadi 1000px, kita berada di kelas terendah, mungkin festival atau ekonomis sehingga melihat panggung pun seperti semua objek terlihat sama besar.

Well done. Kamu sudah mempelajari semua function properties Transformasi CSS3. Sekarang, giliran kamu buat versi kamu.

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