Cara Membuat Animasi Flip Sederhana dengan CSS3
Halo, jumpa kembali dengan saya 🙂 , kali ini saya akan berbagi referensi dan trik mengenai bagaimana Cara Membangun Animasi Flip Sederhana dengan CSS3, telah banyak artikel yang membahas mengenai cara merancang animasi flip ini, tapi tak ada salah nya kalian mencoba trik ini bagi menambah referensi kalian dalan merancang animasi dengan CSS3. berikut strategi cara membuatnya.
Pertama-tama-tama kita akan merancang struktur nya terlebih dahulu dengan kode HTML berikut.
<body>
<input type=checkbox id=block>
<label for=block>Click Me !</label>
<div class=frame>
<div class=square></div>
</div>
</body>
Setelah kita merancang struktur nya, langkah berikutnya yakni kita akan desai dan merancang animasi flip nya dengan kode CSS3 berikut.
.frame {
width: 200px;
height: 200px;
background: cyan;
opacity: 0.5;
transition: all 0.75s linear;
transform-style: preserve-3d;
}
input:checked .frame {
transform: rotateY(180deg);
}
.square {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
transform: rotateY(90deg);
}Setelah segala kode diatas diketikan, silahkan simpan terlebih dahulu, kemudian jalankan di browser masing-masing dan lihat hasinya. Selesai
Lumayan gampang bukan ? Bagus, lumayan demikianlah panduan mengenai bagaimana Cara Membangun Animasi Flip Sederhana dengan CSS3, semoga bermanfaat, amin.
Selamat mencoba 🙂
Sumber https://kursuswebsite.org
