Membuat Website Card Flip Part 1

Membuat Website Flip Card part 1 – Hallo semuanya, apa kabarnya hari ini? Apakah kalian memiliki sebuah website untuk profile? jika belum maka kali ini kita akan coba membuat sebuah website untuk profile yang bisa kalian gunakan untuk website kalian. Baiklah mari kita simak tutorialnya.

1.    Membuat struktur Html dasar

Disini kita akan membuat sebuah struktur HTML dasar dengan menggunakan kelas front untuk bagian depan dari card, dan kelas back untuk menampung elemen yang ada di bagian belakang, dan juga sebuah checkbox untuk membantu sebagai trigger untuk memutar card yang kita buat.

<!DOCTYPE html>
<html>
<head>
    <title>Website Saya</title>
</head>
<body>
<label class="flip-card">
    <input type="checkbox" class="v-flip" />
    <div class="mykh-card">
        <div class="front">
            Depan
        </div>
        <div class="back">
            Belakang
        </div>
    </div>
</label>
</body>
</html>

2.    Membuat untuk bagian utama (bagian depan card)
Kita menggunakan kelas flip-card, dan memberikan css untuk membuatnya menjadi ditangah menggunakan translate, membuat efek 3D dengan preserve-3d dan perspective.

Class kedua adalah kita menggunakan class mykh-card yang sudah juga saya berikan preserve-3d dan juga perspective, dan memberikan transition agar transisi bergerak secara perlahan dan terlihat seperti animasi berputar.

.flip-card {
        -webkit-perspective: 1000px;
        perspective: 1000px;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        display: block;
        width: 500px;
        height: 500px;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        cursor: pointer;
    }

    .mykh-card {
        position: relative;
        height: 100%;
        width: 100%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: all 600ms;
        transition: all 600ms;
        z-index: 20;
    }

3.    Memberikan css untuk tampilan belakang
Sekarang kita akan membuat ruang untuk elemen yang berada di bagian belakang, saya memberikan sebuah property bernama backface-visibility untuk membuat elemen belakan tidak terlihat.
Pada class back saya memberikan rotate 180 derajat agar elemen tersebut menghadap ke belakang.

.mykh-card > div {
        position: absolute;
        height: 100%;
        width: 100%;
        background: #eee;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border-radius: 2px;
    }

    .mykh-card .back {
        background: #222;
        color: #FFF;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

Baiklah teman-teman untuk membuat fungsi klik agar bisa memutar balik elemen akan kita bahas pada artikel selanjutnya di part 2, Membuat Website Card Flip Part 2.