Penggunaan CSS3 3D Transforms Yang Harus Kamu Tahu #1

 Author : hadinug, 20 February, 2014, Komentar

Wow, mungkin ini kata yang sedikit tepat untuk mengungkapkan rasa kagum penulis dengan kemampuan grafis 3D yang bisa di bagun dengan CSS3. Setelah menonton video google I/O di youtube http://www.youtube.com/watch?v=WlwY6_W4VG8 tentang javascript, HTM5 dan CSS3, penulisa sedikit termotivasi untuk mencari referensi dan membuat tutorial tentang CSS3 3D Transform.



Dan pada abad ini telah banyak digunakan 3D design pada beberapa sistem operasi, seperti Apple dengan 3D rounded nya, kemudian Microsoft dengan 3D flat design nya. Jika ingin. Dan jika kita ingin membuat sebuah project aplikasi 3D berbasis web maupun mobile kita juga bisa menggunakan librari threejs. Ada banyak sekali pengembangan CSS3 3D model yang bisa kita manfaatkan sekarang ini.


Yang akan menjadi fokus kita pada kesempatan ini adalah:

  1. Perspective
  2. Fungsi 3D Transform 
  3. Card Flip
  4. Cube
  5. Rectangle Prism

Namun pada halaman ini kita hanya akan membahas poin 1 dan 2 dan untuk poin berikut nya akan dilanjutkan pada tutorial series berikut nya. Baik langsung saja kita mulai dari yang pertama tentang persepctive.

1. Perspective

Perspective dibutuhkan untuk membuat sebuah ruang 3D. Bisa menggunakan dua cara, yang pertama dengan menggunakan property transform
transform: perpective(500px);

Dan yang kedua dengan property perspetive itu sendiri.
perspective: 500px;


Catatan: Untuk pengguanaan kode css pada setiap browser di tambahkan prefix seperti mozila: -moz-transform, chrome: -webkit-transform, opera -o-transform


Nilai perspektif menentukan intensitas efek 3D. Anggap saja sebagai jarak dari penampil ke objek. Semakin besar nilai, semakin jauh jarak, kurang intens efek visual. Pada perspective: 2000px; menghasilkan efek 3D yang halus, seolah-olah kita sedang melihat sebuah objek dari jauh melalui teropong. perspektif: 100px; menghasilkan efek 3D yang luar biasa, seperti serangga kecil melihat sebuah obyek yang masif. Secara default, titik hilang untuk ruang 3D diposisikan di tengah. Anda dapat mengubah posisi titik hilang dengan properti perspective-origin.




2. Fungsi 3D Transform

Sebagai seorang web designer pastinya kita sering bermain dengan dimensi X dan Y, posisi horizontal dan vertikal objek terhadap layar. Nah pada css3 3d ditambahkan satu koordinat lagi yaitu Z.

3D transform memiliki property yang sama dengan 2D transform, dan berikut nilai dari property transform 3d pad css3:
  1. rotateX(angle)
  2. rotateY(angle)
  3. rotateZ(angle)
  4. translateZ(tz)
  5. scaleZ(sz)

Sedangkan translateX () posisi elemen sepanjang sumbu X horisontal, translateZ () posisi sepanjang sumbu Z, yang menjalankan posisi dari depan ke belakang dalam ruang 3D. Nilai-nilai positif posisi elemen lebih dekat dengan penonton/ penglihat, nilai negatif lebih jauh. 

Fungsi memutar memutar elemen sekitar sumbu yang sesuai. Ini adalah sedikit kontra-intuitif pada awalnya seperti yang Anda bayangkan bahwa rotateX akan berputar obyek kiri ke kanan. Sebaliknya, menggunakan rotateX (45deg) berputar elemen di sekitar X sumbu horisontal, sehingga bagian atas elemen sudut kembali dan pergi, dari bagian bawah sudut dekat.
bersambung......

 
Bagikan halaman ke sosial media
 
Tags :   css    css-3d    animation       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda