Selamat Datang

CSS3 3D Transformation

Kita sudah melewati 2 tahap awal, Basic Transformation dan 2D Transformation. Sekarang kita berada di bagian paling menarik dari transformation, Transformasi 3D di CSS3. 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 DEMO hasilnya di sini.

boxx

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 DEMO 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 DEMO di sini.

css3-3d-2

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.

css3-3d-3

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.





Penulis :

Designing for love. Mendesain sudah menjadi darahnya sejak mengenal komputer. Sama seperti kamu, bahagia menjalani passionnya. Writer. Presenter. Front end engineer. Master Engineering on Geo Informatics. :D View all posts by arwasil

Comments

4 thoughts on “CSS3 3D Transformation

  1. […] Booya, sampai sini kamu bisa membuat efek transofrmasi 2D di css3. Masih penasaran, yok nyebur lebih dalam ke efek yang lebih keren, Transformasi 3D. […]

  2. meong says:

    maaf saya seekor pemula sangat pemula ! CSS3 itu built in di dreamweaver apa hrus instal pake driver ?

    • CSS itu bukan software, css hanya kumpulan teks/perintah untuk mengatur halaman web.
      cukup buat file dengan notepad, simpan dengan extensi .css
      silahkan dipelajari sendiri isi filenya seperti apa, googling aja

    • arwasil says:

      Karena CSS merupakan bahasa terformat, kamu bisa buat CSS hanya dengan bantuan text editor (notepad, sublime, dll). Saya rasa di setiap os selalu ada text editor jadi kamu ga perlu dreamweaver, walau di dreamweaver pun kamu bisa menuliskan css dengan live preview.

      Untuk panduan belajar lengkap css dari awal kamu bisa belajar di sini http://www.sitepoint.com/css/

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development