Membuat 2D Transform di HTML dengan CSS3

Selamat. saya akan berbagi ilmu tentang fitur CSS3 transformasi 2D . Sebuah transformasi adalah efek yang membuat elemen berganti bentuk, ukuran, dan posisi. CSS3 mendukung 2D transformasi

Hampir semua browser yang terbaru mendukung transformasi 2D , tetapi dengan properti tertentu.

  • Properti -moz- untuk browser seperti firefox
  • Properti -webkit- untuk browser chrome dan safari
  • Properti -ms- untuk browser Internet Explorer
2D TRANSFORM
3D TRANSFORM

  1. 2D Transform

    2. Macam-macam 2D transform:

    • Translate()
    • rotate()
    • scale()
    • skewX()
    • skewY()

    1. Translate()

      2. method ini akan membuat elemen berpindah tempat dari tempat sebelumnya.(parameter X-axis dan Y-axis atau samping kanan/kiri bawah/atas.

      Contoh element <div> berpindah 100px ke kanan dan 150px ke arah bawah dari tempat sebelumnya:

      div{
transform:translate(100px,150px); 
width:100px;
height:100px;
background:blue;
}

      Sorot dengan
      Mouse

    2. Rotate()

      3. Pasti sudah kelihatan jelas dari namanya, ya method ini membuat elemen berputar beberapa derajat ke arah jarum jam , atau berlawanan arah jarum jam (jika nilai derajat minus "-").

      Contoh elemen <div> berputar 45derajat searah jarum jam : 

      div{
transform:rotate(45deg);
width:100px;
height:100px;
background:green;
}
      Hasil:
      Sorot dengan Mouse
      Catatan. Ubah nilai derajat menjadi minus jika putarannya berlawanan arah jarum jam
    3. Scale()

      4. Method ini akan mengubah ukuran element (membesarkan atau mengecilkan).

      Contoh elemen <div> panjang dan lebar membesar 125% dari ukuran normalContoh elemen <div> panjang dan lebar mengecil menjadi hanya 25% dari ukuran normal 
      div{
width:100px;
height:100px;
background:purple;
transform:scale(1.25,1.25);
}

      div{
width:100px;
height:100px;
background:purple;
transform:scale(0.25,0.25);
}
      SOROT
      SOROT
    4. SkewX

      5. Method ini akan mengubah bentuk sudut elemen X menjadi condong beberapa derajat.

      Contoh sudut X elemen <div> condong 20 derajat.

      div{
width:100px;
height:100px;
background:red;
transform:skewX(20deg);
}
      SOROT
    5. SkewY

      6. Hampir sama dengan skewX method ini juga membuat elemen condong tetapi yang ini pada sudut Y.

      Contoh sudut Y elemen <div> condong 20 derajat 

      div{
width:100px;
height:100px;
background:red;
transform:skewY(20deg);
}
      SOROT

      Catatan. Ubah nilai derajat menjadi minus jika ingin berlawanan arah.

Komentar

Posting Komentar