Animasi CSS

Untuk melakukan translate mode 3D, kita perlu menambahkan property perspective. Translate Untuk transate 3D, property yang digunakan adalah translateZ. Ingat sumbu z pada css adalah arah monitor ke arah kita. Perhatian, translateZ jika digunakan nilai kecil akan terasa seperti scale. Namun kejadian sebetulnya adalah element bergerak mendekati kearah kita. Rotate Untuk rotate 3D, property yang … Read more

Transform origin adalah titik referensi untuk melakukan tranformasi, berfungsi seperti pivot point. Secara default, transform origin berada di center. Kita dapat mengubah property ini, dan akan mengahasilkan animasi yang berbeda. Untuk jelasnya lihat contoh berikut: See the Pen CSS Transform Origin by SkillPlus (@SkillPlus) on CodePen. Selain menggunakan keyword, kita juga bisa mengatur posisi transform … Read more

Skew berguna untuk mengubah bentuk menjadi menjadi seperti belah ketupat. Untuk menggunakan fungsi skew Unit dalam deg (derajat). Fungsi skewX mengubah bentuk dalam arah horizontal. Fungsi skewY mengubah bentuk dalam arah vertikal. Nilai dapat berupa negatif atau positif, yang berguna untuk mengatur arah skew. See the Pen CSS Transform Skew by SkillPlus (@SkillPlus) on CodePen.

Rotate berguna untuk memutar element. Untuk menggunakan fungsi rotate satuan deg, perputaran menggunakan perhitungan derjat. satuan turn, 1 turn adalah 1 putaran penuh, dapat digunakan nilai decimal. saturan rad, menggunakan perhitungan radian. Value positif rotasi searah jarum jam. Value negatif rotas berlawanan arah jarum jam. Perhatian, satuan yang paling umum digunakan adalah deg. See the … Read more