Sabtu, 20 Desember 2014

CSS3 Transform Playground Basic

Master Beben Koben :D sekarang akan bercerita mengenai CSS3 transform property. Transformasi properti menerapkan transformasi 2D atau 3D ke dalam sebuah elemen. Properti ini memungkinkan kita untuk melakukan rotate (memutar), scale (skala), move (memindahkan), skew (miring), dll. Ada layaknya sobat harus mengetahui terlebih dahulu browser versi berapa yang sudah mendukung terhadap hal ini!

PropertyChromeIEMozillaSafariOpera
transform (2D)36.0 4.0 -webkit-10.0 9.0 -ms-16.0 3.5 -moz-3.2 -webkit-23.0 15.0 -webkit- 12.1 10.5 -o-
transform (3D)36.0 12.0 -webkit-10.016.0 10.0 -moz-4.0 -webkit-23.0 15.0 -webkit-

Gue sekarang akan cerita tidak menggunakan kata-kata rangkaian kalimat melainkan dengan berbagi embed form playground play it. Dengan teknik ini, sobat bisa melihat secara langsung efek yg terjadi dengan property values dari CSS3 transform. Berikut beberapa value: none, matrix, translate, scale, rotate, and skew.

Singkat cerita, playground catutan ini versi basic untuk melihat efek-efek yg dihasilkan dari CSS3 transform

Download dulu file, lalu silahkan bermain-main dengan si transform ;))
  • Download CSS3-transform-Property.7z in Ziddu
  • downloads.ziddu.com/download/24265613/CSS3-transform-Property.7z.html
  • CSS3 transform Property unduh via 4shared
  • www.4shared.com/archive/q3mx0HIoba/CSS3_transform_Property.html
Resources by:
>> www.w3schools.com/cssref/css3_pr_transform.asp
>> codepen.io/aarongustafson/pen/jEryLV
Bonus
>> css3playground.com
>> playground.deaxon.com/css

Happy transforms \m/

Tidak ada komentar:

Posting Komentar