Demo Transform dan Transition

Memutar Elemen

Kotak
Awal

rotate
(20deg)

rotate
(-20deg)

transition
hover
rotate

.elemen {
  border:3px solid #444;
  height:5em;
  width:5em;
}

Tambahkan kode berikut untuk memutar kotak:

  -webkit-transform:rotate(…deg);
  -moz-transform:rotate(…deg);
  -o-transform:rotate(…deg);
  -ms-transform:rotate(…deg);
  transform:rotate(…deg);

Transition Hover rotate

.elemen {
  border:3px solid #444;
  height:5em;
  width:5em;
  -webkit-transition:-webkit-transform 0.5s;
  -moz-transition:-moz-transform 0.5s;
  -o-transition:-o-transform 0.5s;
  transition:transform 0.5s;
}

.elemen:hover {
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
}

Skala

Kotak
Awal

scale
(1.2,1.2)

scale
(1.2,-1.2)

transition
hover
scale

.elemen {
  border:3px solid #444;
  height:5em;
  width:5em;
}

Tambahkan kode berikut untuk memberi skala pada kotak:

  -webkit-transform:scale(X,Y);
  -moz-transform:scale(X,Y);
  -o-transform:scale(X,Y);
  -ms-transform:scale(X,Y);
  transform:scale(X,Y);

Transition Hover scale

.elemen {
  border:3px solid #444;
  height:5em;
  width:5em;
  -webkit-transition:-webkit-transform 1s;
  -moz-transition:-moz-transform 1s;
  -o-transition:-o-transform 1s;
  transition:transform 1s;
}

.elemen:hover {
  -webkit-transform:scale(1.2,1.4);
  -moz-transform:scale(1.2,1.4);
  -o-transform:scale(1.2,1.4);
  -ms-transform:scale(1.2,1.4);
  transform:scale(1.2,1.4);
}

Pergerakan

Kotak
Awal

translate
(20px,20px)

translate
(-20px,-40px)

transition
hover
translate

.elemen {
  border:3px solid #444;
  height:5em;
  width:5em;
}

Tambahkan kode berikut untuk memberi skala pada kotak:

  -webkit-transform:translate(X,Y);
  -moz-transform:translate(X,Y);
  -o-transform:translate(X,Y);
  -ms-transform:translate(X,Y);
  transform:translate(X,Y);

Transition Hover translate

.elemen {
border:3px solid #444;
height:5em;
width:5em;
-webkit-transition:-webkit-transform 1.5s;
-moz-transition:-moz-transform 1.5s;
-o-transition:-o-transform 1.5s;
transition:transform 1.5s;
}
.elemen:hover {
-webkit-transform:translate(40px,0);
-moz-transform:translate(40px,0);
-o-transform:translate(40px,0);
-ms-transform:translate(40px,0);
transform:translate(40px,0);
}

Memiringkan sejauh X- dan Y-axis

Kotak
Awal

skew
(20deg,20deg)

skew
(-20deg,-40deg)

transition
hover
skew

.elemen {
  border:3px solid #444;
  height:5em;
  width:5em;
}

Tambahkan kode berikut untuk memberi kemiringan bidang kotak:

  -webkit-transform:skew(…deg,…deg);
  -moz-transform:skew(…deg,…deg);
  -o-transform:skew(…deg,…deg);
  -ms-transform:skew(…deg,…deg);
  transform:skew(…deg,…deg);

Transition Hover skew

.elemen {
  border:3px solid #444;
  height:5em;
  width:5em;
  -webkit-transition:-webkit-transform 2s;
  -moz-transition:-moz-transform 2s;
  -o-transition:-o-transform 2s;
  transition:transform 2s;
}

.elemen:hover {
  -webkit-transform:skew(0,20deg);
  -moz-transform:skew(0,20deg);
  -o-transform:skew(0,20deg);
  -ms-transform:skew(0,20deg);
  transform:skew(0,20deg);
}

Alternatif: Mengumpulkan beberapa nilai transform ke dalam matrix

Kotak
Awal

look
like
rotate

look
like
scale

look
like
translate

look
like
skew

.elemen {
  border:3px solid #444;
  height:5em;
  width:5em;
}

Tambahkan kode berikut untuk menggunakan matrix sebagai nilai transform:

  -webkit-transform:matrix(n,n,n,n,n,n);
  -moz-transform:matrix(n,n,n,n,n,n);
  -o-transform:matrix(n,n,n,n,n,n);
  -ms-transform:matrix(n,n,n,n,n,n);
  transform:matrix(n,n,n,n,n,n);

Rotate

  -webkit-transform:matrix(0.9,0.4,-0.4,0.9,0,0);
  -moz-transform:matrix(0.9,0.4,-0.4,0.9,0,0);
  -o-transform:matrix(0.9,0.4,-0.4,0.9,0,0);
  -ms-transform:matrix(0.9,0.4,-0.4,0.9,0,0);
  transform:matrix(0.9,0.4,-0.4,0.9,0,0);

Scale

  -webkit-transform:matrix(1.4,0,0,-1.4,0,0);
  -moz-transform:matrix(1.4,0,0,-1.4,0,0);
  -o-transform:matrix(1.4,0,0,-1.4,0,0);
  -ms-transform:matrix(1.4,0,0,-1.4,0,0);
  transform:matrix(1.4,0,0,-1.4,0,0);

Translate

  -webkit-transform:matrix(1,0,0,1,20,20);
  -moz-transform:matrix(1,0,0,1,20px,20px);
  -o-transform:matrix(1,0,0,1,20,20);
  -ms-transform:matrix(1,0,0,1,20,20);
  transform:matrix(1,0,0,1,20,20);

Skew

  -webkit-transform:matrix(1,0.4,0.4,1,0,0);
  -moz-transform:matrix(1,0.4,0.4,1,0,0);
  -o-transform:matrix(1,0.4,0.4,1,0,0);
  -ms-transform:matrix(1,0.4,0.4,1,0,0);
  transform:matrix(1,0.4,0.4,1,0,0);

Transition

Dengan CSS3, kita dapat menambahkan efek ketika mengubah dari satu gaya ke yang lain, tanpa menggunakan animasi Flash atau javascripts.

linear

ease

ease-in

ease-out

ease-in-out

Hover on me!