Transformation, atau transformasi atau css properties yang berfungsi merubah rupa (bentuk & sifat) HTML element dalam bidang 2 dimensi atau 3 dimensi. Transformasi sering digunakan untuk memindahkan, mengecilkan elemen, atau merubah koordinatnya. Memang sedikit membingungkan kalau tidak langsung dicoba kerjakan, apalagi istilah ini sering tertukar dengan kawannya, transition. Transformation, seperti yang telah kita obrolkan barusan, berbeda dengan transition dimana Transition berfungsi membuat animasi dengan perantara 2 state(kondisi awal dan akhir).
Langsung saja kita masuk ke codingnya yaitu seperti biasanya kita mulai dengan menuliskan semua tag dasar html yaitu :
Setelah itu barulah kita menuliskan CSS nya, sebelumnya kita harus mengenal beberapa method di CSS3 2D ini yaitu ada matrix(n,n,n,n,n,n), translate(x,y), translateX(n), scale(x,y),scaleX(n) , scaleY(n), rotate(angle), skew(x-angle,y-angle), skewX(angle) dan skewY(angle).
Di kesempatan kali ini kita akan mempelajari translate() dan rotate().
Untuk yang pertama ini method translate() yaitu dimana kita mengubah posisi awal dari sebuah div sehingga codingnya adalah :
Setelah itu barulah kita memasukkan div nya seperti coding dibawah ini :
Menjadi seperti ini :
Thankyou for reading :)
Semoga bermanfaat and have a nice day
No comments:
Post a Comment