Penggunaan CSS3 3D Transforms Yang Harus Kamu Tahu #2

 Author : hadinug, 21 February, 2014, Komentar

Di bagian yang pertama kita telah belajar tentang perspective pada css3 3d, bagaimana nilai perspective mempengaruhi sebuah elemen 3d. Nah pada bagian yang kedua ini penulisa akan mencoba membuat sebuah animasi 3d card, sebuat saja Card Flip dengan memanfaatkan nilai perspective dan 3d transform pada properti css.



3. Card Flip

Untuk membuat objek 3d card flip hal yang pertama harus kita lakukan adalah dengan membuat elemen markup HTML

<section class="container">
   <div id="card">
       <figure class="front">1</figure>
       <figure class="back">2</figure>
   </div>
</section>


.container merupakan rumah ruang 3D. # card bertindak sebagai pembungkus untuk objek 3D. Dua elemen terpisah untuk kedua wajah kartu, depan dnan belakang.

.container { 
  width: 200px;
  height: 260px;
  position: relative;
  perspective: 800px;
}

Sekarang elemen # card dapat ditransformasikan dalam ruang 3D induknya. Kita gunakan posisi absolute / relatif sehingga objek 3D bisa dihapus dari aliran dokumen. 

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

Wadah perpective hanya berlaku untuk child keturunan nya langsung, dalam hal ini #card. Agar child berikutnya untuk mewarisi perspektif parent, dan tinggal di ruang 3D yang sama, parent dapat menyampaikan perspektif dengan menambahkan preserve-3d. Tanpa mengubah gaya 3D, wajah kartu akan diratakan dengan parent.

Untuk posisi wajah dalam ruang 3D, kita harus mengatur ulang posisi mereka di 2D dengan position: absolute. Untuk menyembunyikan sisi depan ketika akan menampilkan sisi belakang, kita menggunakan backface-visibility: hidden.

#card figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

Kemudian pada elemen anak dari #card kita tambahkan style berikut:

#card .front {
  background: red;
}
#card .back {
  background: blue;
  transform: rotateY( 180deg );
}

Untuk animasi kita gunakan property transform : rotateY(deg)

.fliped {
  transform: rotateY( 180deg );
}

Mudah bukan, untuk melihat hasil demonstrasinya bisa dilihat disini




 
Bagikan halaman ke sosial media
 
Tags :   css    css-3d       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda