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!
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.
Property | Chrome | IE | Mozilla | Safari | Opera |
---|---|---|---|---|---|
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.0 | 16.0 10.0 -moz- | 4.0 -webkit- | 23.0 15.0 -webkit- |
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 ;))
>> www.w3schools.com/cssref/css3_pr_transform.asp
>> codepen.io/aarongustafson/pen/jEryLV
Bonus
>> css3playground.com
>> playground.deaxon.com/css
- 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
>> www.w3schools.com/cssref/css3_pr_transform.asp
>> codepen.io/aarongustafson/pen/jEryLV
Bonus
>> css3playground.com
>> playground.deaxon.com/css
Happy transforms \m/
Loading... |
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...