JSFiddle - React, Tailwind, and code Playground

by Lalu Abd.Rahman

HTML

<div class="wrapper">
    <!-- Elemen 'card' membungkus sisi gambar depan dan gambar belakang -->
    <div class="card">
        <div class="front face">
             <h1>Judul Gambar, tentu bisa apa saja!</h1>

        </div>
        <!-- Belakang gambar - hanya terlihat setelah gambar dibalik -->
        <div class="back face">
            <div class="message">
                <p>Kepada Lalu Abd.Rahman,</p>
                <p>Dengan suhu tahunan rata-rata -55 derajat Celcius, planet Mars terlalu dingin untuk ditinggali manusia. Ilmuwan sedang mencari cara untuk menghangatkan Mars dengan menciptakan efek rumah kaca buatan.</p>
                <p>Bakteri penghasil metana yang disebut metanogen dapat dimasukkan ke permukaan Mars. Lalu?</p>
                <p>Dari Penggemarmu :P</p>
            </div>
            <!-- Alamat di belakang gambar -->
            <div class="address">
                <p>Jalan Menuju Langit No.17
                    <br>Negara: Indonesia
                    <br>Planet: Bumi
                    <br>Galaksi: Bimasakti
                    <br>
                </p>
            </div>
        </div>
        <!-- /akhir back -->
    </div>
    <!-- /akhir card -->
</div>
<!-- /akhir pf wrapper -->

CSS

body {
    padding:20px;
    color:#000;
    background-color: #f9f9f9;
    text-align: center;
}
.wrapper {
    position: relative;
    padding-top:0;
    z-index: 1;
    -webkit-perspective:1000px;
    perspective: 1000px;
    display: inline-block;
    margin:5px auto;
}
.card {
    width: 750px;
    height: 475px;
    margin: 0 auto;
    border:8px solid white;
    cursor:pointer;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /*  Properti css transtition digunakan untuk mengatur jeda atau 'delay'. Misalnya Anda mengganti 0s menjadi 3s maka gambar akan dibalik setelah 3 detik sejak Anda hover. Jika 0s berarti gambar langsung dibalik saat hover.
        */
    -webkit-transition: all 1s linear 0s;
    -moz-transition: all 1s linear 0s;
    -o-transition: all 1s linear 0s;
    -ms-transition: all 1s linear 0s;
    transition: all 1s linear 0s;
    -webkit-box-shadow: 0px 0px 10px #aaa;
    box-shadow: 0px 0px 10px #aaa;
}
.wrapper:hover .card {
    /*  
            Ubah arah balik kartu - ubah rotateY menjadi rotateX atau rotateZ.
            Properti css "transform" bertanggungjawab bagaimana perilaku kartu saat kita hover - yaitu meletakkan cursor di atasnya.  Cobalah mengubah rotateY menjadi rotateX atau rotateZ dan lihat perbedaannya saat Anda hover.
        */
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.face {
    position: absolute;
    width: 100%;
    height:100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
/*  
Class "front" adalah gambar depan sedangkan "back" adalah gambar belakang.
        */
 .front {
    background-color: #3d3355;
    background-image:...