Cara Membuat Kartu Flip 3D dengan CSS3 ( pure CSS )

Hallo sovat game4tm, kesempatan kali ini kita akna membahas tentang CSS nah apa sih CSS itu silahkan anda cari sendiri lah di google :D , nah karena saya adalah seorang yang  gemar sekali terhadap web design maka saya akan berbagi sedikit ilmu saya mengenai CSS , nah ilmu yang ingin saya berikan adalah bagaimana membuat kartu flip 3D dengan CSS , yah pembuatan ini terinspirasi dari kartu flip di dalam game-game yang saya mainkan , saya terispirasi dari game Yu-Gi-Oh dimana di kedua kartu memiliki sisi yang berbeda , apakah bisa kalau di buat di CSS ? mungkin menarik juga

Nah setelah saya menelusuri banyak website yang menyediakan tutorialnya akhirnya saya merubah sedikit dari tutorial tersebut jadi lebih singkat dan mudah untuk di pahamin oleh kita , nah dari semuanya sudah saya sederhanakan mungkin jadi anda bisa menggunakannya untuk tutorial dan masih banyak lainnya

Nah untuk membuatnya kita memerlukan sedikit sintaks
Nah bagaimana apakah anda ingin membuat kartu flip 3D dengan CSS tersebut mari lihat tutorialnya dibawah ini
Pertama-tama ketiklah skrip seperti di bawah ini

<!-- Start Kartu Flip 3D CSS dari www.game4tm.org -->
<div class="flip">
<div class="kartu">
    <div class="depan"> Ini Depan</div>
        <div class="belakang"> Ini Belakang</div>
</div>
</div>
<!-- End Kartu Flip 3D CSS dari www.game4tm.org -->

Nah setelah itu anda perlu memasukkan script css seperti di bawah ini di  css style anda

<style type="text/css">
.flip{
border:1px solid #000;  /* Warna border hitam solid ukuran 1px yg memudahkan*/
width: 250px; /* Ini Lebarnya harus sama kaya di .depan dan .belakang*/
height: 300px; /* Ini Tingginya harus sama kaya di .depan dan .belakang*/

}
.flip:hover .kartu{ /*Ini adalah efek flip setelah di hover oleh mouse kita*/
transform:rotateY(180deg); /*Membuat kartu berputar 180 derajat pada sumbu vertikal*/
}
.kartu{
position:relative;
transition: ease all 0.5s; /*Waktu transisi yang di butuhkan proses flip 3dnya*/
transform-style:preserve-3d; /* Style flip yang digunakan */
}
.depan,.belakang{
width: 250px; /* Ini Lebarnya harus sama kaya di .depan dan .belakang*/
height: 300px; /* Ini Tingginya harus sama kaya di .depan dan .belakang*/
top:0px;
position:absolute;
backface-visibility:hidden; /* berfungsi untuk menutupi bagian belakang dalam position: yg sama*/
}
.depan{
z-index:1; /* layer pertama*/
background:#09C; /*Warna background*/
}
.belakang{
z-index:2; /*Layer kedua*/
background:#0ff; /* Warna Background*/
transform:rotateY(180deg); /* Posisi awalnya berbeda*/

}
</style>

Setelah itu anda save pekerjaan anda dan cobalah lihat pekerjaan anda tadi maka anda sudah berhasil membuat flip 3D dengan menggunakan Pure CSS cukup mudah kan dan jangan lupa untuk mencobanya sendiri dan mengembangkannya menjadi lebih baik lagi

 

Subscribe to receive free email updates: