Transformasi adalah sebuah efek yang memungkinkan perubahan suatu unsur
atau elemen seperti bentuk, ukuran dan posisi. Dengan CSS3 transformasi,
kita dapat mengubah, skala, putaran, kebalikan, dan elemen peregangan.
Sehingga transformasi menimbulkan efek 2D atau 3D.
Dan pada saat ini efek transformasi sudah dukung oleh beberapa browser
seperti Internet Explorer 9, Firefox, Chrome, Safari, Opera. Tapi dari
beberapa browser yang mendukung efek transformasi ini, memiliki cara
yang berbeda pada penulisan kodenya. Berikut perbedaan yang perlu
diperhatikan :
Internet Explorer 9 memerlukan awalan-ms-.
Firefox membutuhkan awalan-moz-.
Chrome dan Safari membutuhkan awalan-WebKit-.
Opera membutuhkan awalan-o-.
Sehingga bila kita menginginkan semua browser yang saya sebutkan diatas
menampilkan efek transformasi yang kita buat, sebaiknya kita buat
seluruh kode yang dibutuhkan setiap browser diatas.
Ok, berikut saya berikan beberapa contoh metode transformasi 2D :
Translate
Dengan metode Translate, elemen bergerak dari posisi semula keposisi
lain, tergantung pada parameter yang diberikan untuk posisi kiri (sumbu
X) dan bagian atas (sumbu Y) :
Berikut hasilnya :
ini pada posisi awal
ini posisi kekanan 50px dan kebawah 10px
Rotate
Dengan metode rotate, elemen berputar searah jarum jam pada derajat
tertentu. Nilai negatif , elemen berputar menjadi berlawanan arah jarum
jam.
<div class="rotate">ini pada posisi awal
</div>
<div class="rotate" id="memutar">ini posisi 30 derajat/div>
Berikut hasilnya :
ini pada posisi awal
ini posisi 30 derajat/div>
Scale
Transformasi ini berfungsi mengubah ukuran sebuah elemen baik diperkecil
atau diperbesar. Dalam hal ini ukuran atau ketebalan border juga ikut
berubah.
Skew
Dengan metode condong, elemen berubah dalam sudut tertentu, tergantung
pada parameter yang diberikan, untuk horizontal (sumbu X) dan vertikal
(sumbu Y) :
WoW mantapp
ReplyDeletewah kren... coba dulu ahhh
ReplyDeletemnt kungan baliknya ya!!!
@Zh!nThoTerimakasih telah berkunjung dan memberi komentar..
ReplyDelete