Dokumen ini membahas implementasi card flip menggunakan CSS untuk menampilkan dua sisi konten. Elemen card dibuat dengan tag div dan memiliki dua bagian yaitu front dan back. Style diperkenalkan untuk card, front, dan back agar dapat berputar 180 derajat saat dihover, menampilkan sisi belakang. Implementasi ini dapat diubah sesuai selera untuk aplikasi seperti produk e-commerce.

1. Card Flip
Eksperimen CSS
Kuliahkita - Georgius Rinaldo
dodo@kuliahkita.com

2. Pendahuluan
Sebelumnya telah dibahas penyajian informasi dengan cara tab atau
accordion yang dapat dikatakan sebagai penampung, sekarang Kita
akan coba bahas menampilkan elemen kontennya.
Cara menampilkan yang dibahas adalah card flip. Elemen ini bisa
digunakan untuk menampilkan misalnya produk pada e-commerce
dalam satu baris.

3. Card Flip ini sederhana. Elemen umumnya akan berbentuk persegi dan
punya dua sisi. Ketika elemen ini dihover, elemen akan menampilkan
sisi belakangnya. Ketika mouse keluar, maka akan kembali ke state
awal yaitu menampilkan sisi depannya.
hover → putar
Kelakuan Card Flip
Depan Putar Belakang

4. Implementasi Card Flip - 1
Pertama kita buat kerangka HTML-nya
terlebih dahulu.
Elemen konten membutuhkan
penampung dalam hal ini adalah card
yang berguna untuk membungkus isi dari
sebuah card. Card mempunyai dua sisi
yaitu front dan back.
Masing-masing elemen ini diwakili oleh
tag div dengan nama kelas yang
ditentukan.
HTML
<div class="card">
<div class="front">
<h1>Halo</h1>
</div>
<div class="back">
<h1>Belakang</h1>
</div>
</div>

5. CSS
.card {
/*======= Style Kartu =======*/
position: relative;
margin: 20px;
width: 200px;
height: 200px;
transition: .6s all ease;
transform-style: preserve-3d;
/*======== Style isi ========*/
background: #333;
color: white;
margin: 20px;
text-align: center;
line-height: 200px;
font-family: arial;
}
Implementasi Card Flip - 2
Pertama kita buat terlebih dahulu style
untuk card.
Card akan punya posisi relatif terhadap
elemen lainnya dan mempunyai besar
yang tetap yaitu 200 x 200 pixel (ukuran
boleh diubah).
Lalu ditambah juga style preserve-3d
yang merender 3d-space elemen dalam
style transform-style.

6. CSS
.front, .back {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
backface-visibility: hidden;
}
Implementasi Card Flip - 3
Kemudian, berikan style untuk bagian
depan dan belakang kartu yaitu elemen di
dalam card dengan kelas front dan back.
Posisi diset absolute tetapi terhadap
elemen penampungnya yaitu card.
Lalu diberikan juga style untuk membuat
tampilan depan dan belakang layaknya
kartu dengan backface-visibility: hidden
sehingga bagian belakang kartu tidak
terlihat.

7. CSS
.back {
transform: rotateY(180deg);
}
.card:hover{
transform: rotateY(180deg);
}
Implementasi Card Flip - 3
Terakhir adalah menambahkan style pada
kelas back supaya ada di belakang kartu
dan tersembunyi dengan style yang
terdefinisi. Caranya adalah dengan
memutar back sejauh 180 derajat di posisi
awal.
Lalu untuk animasi ketika mouse masuk
ke elemen, putar semua elemen lagi
dengan 180 derajat sehingga posisi
elemen depan dan belakang terputar.

8. Finalisasi
Setelah card flip telah selesai dibuat, Anda bisa mengubah dan
menyesuaikannya sesuai dengan selera Anda.
Anda bisa menambah menu, mengubah warna, ukuran, dll sesuai
kreativitas Anda.
Contoh dapat dilihat pada Codepen Kuliahkita