Penggunaan CSS3 3D Transforms Yang Harus Kamu Tahu #3

 Author : hadinug, 21 February, 2014, Komentar

Pada bagian yang ketiga kita akan membuat objek 3d berupa kotak (cube). Di tutorial yang pertama dan kedua kita sudah mempelajari tentang perspective, 3d transform, dan membuat animasi card-flip sederhana. Nah ditutorial bagian ke tiga ini dari penggunaan CSS3 3d transform yang harus ketahui, merupakan pengembangan dari tutorial sebelum nya.


4. Cube

Langsung saja untuk membuat sebuah objek 3d cube, buat elemen makrup HTML seperti berikut:



<div class="container">
   <div id="cube" class="spinning">
       <figure class="front">1</figure>
       <figure class="back">2</figure>
       <figure class="right">3</figure>
       <figure class="left">4</figure>
       <figure class="top">5</figure>
       <figure class="bottom">6</figure>
   </div>

</div>


Kemudian pada dasar komponen kontainer 3d objek kita tambahkan script css berikut:


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

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

#cube figure {
  width: 196px;
  height: 196px;
  display: block;
  position: absolute;
  border: 2px solid black;
}


Kemudian pada elemen halaman antar muka kita tambahkan kode css berikut:


 #cube .front{ background: hsla(0, 100%, 50%, 0.7 ); }
 #cube .back { background: hsla(60, 100%, 50%, 0.7 ); }
 #cube .right{ background: hsla( 120, 100%, 50%, 0.7 ); }
 #cube .left { background: hsla( 180, 100%, 50%, 0.7 ); }
 #cube .top{ background: hsla( 240, 100%, 50%, 0.7 ); }
 #cube .bottom { background: hsla( 300, 100%, 50%, 0.7 ); }
 
 #cube .front{
 -webkit-transform: translateZ( 100px );
 -moz-transform: translateZ( 100px );
 -o-transform: translateZ( 100px );
 transform: translateZ( 100px );
 }
 #cube .back {
 -webkit-transform: rotateX( -180deg ) translateZ( 100px );
 -moz-transform: rotateX( -180deg ) translateZ( 100px );
 -o-transform: rotateX( -180deg ) translateZ( 100px );
 transform: rotateX( -180deg ) translateZ( 100px );
 }
 #cube .right {
 -webkit-transform: rotateY( 90deg ) translateZ( 100px );
 -moz-transform: rotateY( 90deg ) translateZ( 100px );
 -o-transform: rotateY( 90deg ) translateZ( 100px );
 transform: rotateY( 90deg ) translateZ( 100px );
 }
 #cube .left {
 -webkit-transform: rotateY(-90deg ) translateZ( 100px );
 -moz-transform: rotateY(-90deg ) translateZ( 100px );
 -o-transform: rotateY(-90deg ) translateZ( 100px );
 transform: rotateY(-90deg ) translateZ( 100px );
 }
 #cube .top {
 -webkit-transform: rotateX( 90deg ) translateZ( 100px );
 -moz-transform: rotateX( 90deg ) translateZ( 100px );
 -o-transform: rotateX( 90deg ) translateZ( 100px );
 transform: rotateX( 90deg ) translateZ( 100px );
 }
 #cube .bottom {
 -webkit-transform: rotateX(-90deg ) translateZ( 100px );
 -moz-transform: rotateX(-90deg ) translateZ( 100px );
 -o-transform: rotateX(-90deg ) translateZ( 100px );
 transform: rotateX(-90deg ) translateZ( 100px );
 }


Dan pada bagian terakhir kita tambahkan sebuah animasi pada keyframes, jika anda belum familiar silahkan lihat tutorial @keyframes sebelumnya yang ditulis oleh penulis pada blog ini.


 @-webkit-keyframes spinCubeWebkit {
    0% { -webkit-transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg ); }
100% { -webkit-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }
}

@-moz-keyframes spinCubeMoz {
    0% { -moz-transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg ); }
100% { -moz-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }
}


Demo link nya bisa dilihatdisini


 
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