Tutorial CSS3 Part 5 – Belajar CSS3 Transform


Tutorial CSS3 Part 5 – Belajar CSS3 Transform

Tutorial CSS3 Part 5 – Belajar CSS3 Transform – pada kesempatan kali ini kita akan masuk ke tutorial css transform css. css transform adalah salah satu yang terpenting yang harus di pahami bagi teman-teman yang ingin membuat efek animasi dengan css3. teman-teman nantinya bisa membuat efek memutar element, membuat element bergerak dan sebagainya. yang salah satu yang menjadi dasarnya adalah css transform. oleh sebab itu kita akan mempelajari css transform terlebih dulu di tutorial css3 part 5 ini. baru kemudian nya di tutorial selanjutnya kita akan belajar tentang css transition dan css animation.

CSS Transform atau Transformasi css memungkin kan kita untuk membuat efek rotate(memutar element), scale,dan skew pada element html. masing-masing dari efek ini akan kita pelajari satu persatu. dengan css transformation ini juga memungkinkan kita dapat mengganti warna element html, mengubah ukuran serta mengubah posisi element html. silahkan teman-teman perhatikan pada penjelasan berikut ini. Tutorial CSS3 Part 5 – Belajar CSS3 Transform

Tutorial CSS3 Part 5 – Belajar CSS3 Transform

Sebelum lebih jauh mempelajari CSS3. ada baik nya teman-teman mengetahui dulu tentang css3 dan versi browser yang teman-teman. agar css3 support dengan browser yang teman-teman atau user gunakan nantinya.

Berikut ini adalah beberapa metode transform css:

  • translate()
    translate() adalah fungsi yang bisa di gunakan untuk memindahkan sebuah element. kita bisa menentukan posisi nye dengan memberikan niai pada parameter x untuk jarak samping dan parameter y untuk jarak tingginya.
  • scale()
    fungsi method scale() ini di gunakan untuk melebarkan atau menjauhkan element dengan menambah atau mengurangi ukuran element. seperi effect zoom lah kira-kiranya.
  • skewX()
    Skew() di gunakan untuk memiringkan element dengan mengatur tiap nilai pada sumbu x nya.
  • skewY()
    Skew() di gunakan untuk memiringkan element dengan mengatur tiap nilai pada sumbu y nya.
  • rotate()
    rotate() adalah fungsi yang bisa kita gunakan untuk memutar sebuah element. untuk memutar elemeny nya kita bisa menentukan nilainya di dalam parameter fungsi rotate ini. untuk nilainya sendiri bisa kita tentukan dengan cara memberikan nilai derajat putar nya.
  • matrix()
    fungsi matrix berguna untuk menggabungkan beberapa transform lainnya seperti menggabungkan rotate(), skew() scale() dan lainnya menjadi satu. sehingga transform tersebut akan di lakukan secara sekaligus.

Contoh CSS Transform

Akan saya buatkan masing-masing contoh nya agar lebih mudah di pahami. dan di sertakan juga penjelasan singkatnya. Langsung saja kita masuk ke contoh cara penggunaan nya agar lebih mudah di pahami. Tutorial CSS3 Part 5 – Belajar CSS3 Transform

Contoh CSS Transform : translate()

seperti yang sudah di jelaskan pada penjealasan di atas. fungsi translate ini di gunakan untuk memindahkan element html. cara penulisannya adalah

pada parameter pertama untuk nilai jarak kiri kanan nya. pada parameter kedua berikan nilai untuk jarak atas bawah nya. baca juga Membuat efek hover zoom dengan css3.Tutorial CSS3 Part 5 – Belajar CSS3 Transform.

translate.html

style.css

hasilnya

Tutorial CSS3 Part 5 - Belajar CSS Transform

translate

bisa teman-teman lihat pada gambar di atas. kotak 2 yang kita berikan fungsi translate pun berhasil di pindahkan. perhatikan kotak 1 dan kotak 2.

Contoh CSS Transform : scale()

scale.html

scale.css

contoh transform css scale

scale

perhatikan pada contoh scale css di atas. kotak 2 pun berhasil kita lebarkan dengan menggunakan fungsi scale css3 transformation. Tutorial CSS3 Part 5 – Belajar CSS3 Transform.

Contoh CSS Transform : skew()

skew.html

skew.css

hasilnya

css3 transform function skew

skew

Contoh CSS Transform : rotate()

rotate.html

rotate.css

tutorial css3 transform

rotate

element pun berhasil di putar dengan menggunakan method rotate. masukkan nilai derajat yang teman-teman inginkan di dalam parameter fungsi rotate seperti contoh di atas.

Contoh CSS Transform : matrix()

contoh penulisan fungsi matrix adalah sebagai berikut

matrix.html

matrix.css

css3 transform funcrtion matrix

matrix

baiklah sekian dulu tutorial css3 kali ini tentang Tutorial CSS3 Part 5 – Belajar CSS3 Transform. semoga dapat bermanfaat. selanjutnya kita akan membahas css3 transition atau transisi.


Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Tutorial Menarik Lainnya

jajar genjang css
membuat slidemenu dengan css dan jquery
cara membuat animasi preloader dengan css3

Diskusi

Belum Ada Diskusi

Tulis Komentar / Pertanyaan

Download ebook belajar HTML & CSS dasar untuk pemula gratis

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.

Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.

DOWNLOAD