dengan property CSS transform kita dapat memanipulasi element seperti memindahkan, mengatur skalanya dll, cara penulisannya adalah sbb:
untuk melihat video tutorialnya klik disini
berikut metode yang dimiliki css transform
| translate(x,y) | memindahkan element dari posisi asalnya sesuai sumbu x dan y, contoh transform: translate(50px, 100px); Artinya kita pindahkan element kekanan 50px dan kebawah 100px |
| rotate() | memutar element searah atau berlawan dengan jarum jam, sesuai dengan nilai derajat yang kita
berikan. contoh transform: rotate(20deg);, putar element searag jarum jam sebanyak 20 derajat |
| scale() | method untuk menambah atau mengurangi ukuran element, jika di isi dengan 1 parameter misal
transform:scale(2); artinya merubah ukuran menjadi 2x dari ukuran semula. apabila diisi dengan 2 parameter maka, transform:scale(width,height); contoh. transform: scale(2, 3); artinya rubah lebar element 2x ukuran semula dan tinggi element 3x ukuran semula |
| scaleX() | menambah atau mengurangi lebar / width element. hanya dapat di isi dengan 1 parameter contoh
transform: scaleX(2); rubah lebar / width element 2x lebih besar dari ukuran semula |
| scaleY() | menambah atau mengurangi tinggi / height element. hanya dapat di isi dengan 1 parameter
contoh
transform: scaleX(2); rubah tinggi / height element 2x lebih besar dari ukuran semula |
| skew(x,y) | membuat element condong ke sumbu x atau y, contoh transform: skew(20deg, 10deg); membuat element condong 20 derajat ke sumbut x dan 10 derajat ke sumbu y contoh dari w3schools |
| skewX() | mebuat element condong ke sumbu X |
| skewY() | mebuat element condong ke sumbu Y |
| matrix() | mengkombinasikan semua transform method ke dalam 1 methode, matrix() method memiliki 6
parameter: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) contoh dari w3schools |
memungkinkan kita dapat merubah properti html secara halus transition memiliki 4 property yaitu:
transition:
property
duration
transition-timing-function
delay;
dengan duration sebagai property yang wajib diisi.
contoh transition: width 2s linear 1s;
berikan transisi pada width saja selama 2 detik dengan kecepatan yang sama dari awal
sampai akhir tunggu 1 detik untuk melakukan transisi
| property | berfungsi untuk menentukan efek apa saja yang ingin di berikan transisi secara spesifik. video penjelasannya |
| duration | adalah lama durasi dari transisi,satuan yang biasa di gunakans : second dan ms : milisecond |
| transition-timing-function | adalah property yang secara spesifik mengatur kecepatan dari efek transition, memiliki 4
nilai:
|
| Delay | delay yang di lakukan sebelum transition berjalan satuan yang biasa di gunakan s : second dan ms : milisecond |