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.

13 Oktober 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat