Membuat Animasi Kubus dengan CSS

Halo agan semua..... bagaimana dengan progres belajarnya hari ini? semoga lancar dan maksimal. Kali ini saya akan berbagi cara membuat kubus dengan css penasaran........??? silahkan lihat Demonya: <a href='http://codepen.io/maddock/pen/aNVXVR'>http://codepen.io/maddock/pen/aNVXVR</a>

Ayo kita mulai saja.....

Pertama: Kita buat dulu struktur HTML-nya

<h1>CSS 3D CUBE</h1>

<section class="container">
  <div class="cube">
    <div class="front"><a href="#front">1</a></div>
    <div class="back"><a href="#back">2</a></div>
    <div class="right"><a href="#right">3</a></div>
    <div class="left"><a href="#left">4</a></div>
    <div class="top"><a href="#top">5</a></div>
    <div class="bottom"><a href="#bottom">6</a></div>
  </div>
</section>

Untuk membuat kubus, kita perlu 6 sisi, depan-belakang, kiri-kanan, atas-bawah jd kita bikin 6 div, sebagai wadah (container) dari kubus tsb, kita bikin sebuah elemen section (boleh pke div) sebagai wadah (container) judulnya kita bikin elemen h1. nah...... sekarang kita lanjut ke bagian menariknya, yaitu css

Kedua: Kita bikin CSS-nya

html, body {
  margin: 0;
  padding: 0;
}

body {
  text-align: center;
  font-family: sans-serif;
  background-color: black;
  color: white;
}

h1 {
  font-size: 4rem;
  margin: 30px auto;
}

.container {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: fixed;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-15deg) rotateY(-20deg) translateZ(-100px);
  transform: rotateX(-15deg) rotateY(-20deg) translateZ(-100px);
  -webkit-transform-origin: center center -100px;
  transform-origin: center center -100px;
  -webkit-animation: around 5s cubic-bezier(0.94, -0.6, 0.45, 1.31) infinite;
  animation: around 5s cubic-bezier(0.94, -0.6, 0.45, 1.31) infinite;
}
.cube div {
  width: 195px;
  height: 195px;
  display: block;
  margin: 0;
  position: absolute;
}
.cube div a {
  color: white;
  font-size: 8em;
  text-decoration: none;
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.cube .front {
  -webkit-transform: rotateY(0deg) translateZ(100px);
  transform: rotateY(0deg) translateZ(100px);
  background-color: rgba(0, 191, 255, 0.7);
  border: 2px solid rgba(0, 191, 255, 0.7);
}
.cube .back {
  -webkit-transform: rotateX(180deg) translateZ(100px);
  transform: rotateX(180deg) translateZ(100px);
  background-color: rgba(124, 252, 0, 0.7);
  border: 2px solid rgba(124, 252, 0, 0.7);
}
.cube .left {
  -webkit-transform: rotateY(-90deg) translateZ(100px);
  transform: rotateY(-90deg) translateZ(100px);
  background-color: rgba(255, 215, 0, 0.7);
  border: 2px solid rgba(255, 215, 0, 0.7);
}
.cube .right {
  -webkit-transform: rotateY(90deg) translateZ(100px);
  transform: rotateY(90deg) translateZ(100px);
  background-color: rgba(255, 69, 0, 0.7);
  border: 2px solid rgba(255, 69, 0, 0.7);
}
.cube .top {
  -webkit-transform: rotateX(90deg) translateZ(100px);
  transform: rotateX(90deg) translateZ(100px);
  background-color: rgba(255, 0, 157, 0.7);
  border: 2px solid rgba(255, 0, 157, 0.7);
}
.cube .bottom {
  -webkit-transform: rotateX(-90deg) translateZ(100px);
  transform: rotateX(-90deg) translateZ(100px);
  background-color: rgba(184, 111, 220, 0.7);
  border: 2px solid rgba(184, 111, 220, 0.7);
}

@-webkit-keyframes around {
  100% {
    -webkit-transform: rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
    transform: rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
  }
}

@keyframes around {
  100% {
    -webkit-transform: rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
    ransform: rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
  }
}

Lumayan banyak ya gan CSSnya..... ^_^ okeh....ada beberapa tag CSS yg mau ane jelasin disini:

///&gt; perspective tag ini berfungsi menentukan bagaimana perspektif elemen 3D akan dilihat ///&gt; transform tag ini berfungsi memberikan transformasi 2D/3D pada elemen ///&gt; translateX/Y/Z tag ini berfungsi memberikan efek translasi 3D pada sumbu X/Y/Z ///&gt; animation tag ini berfungsi membuat animasi pada elemen, nama animasi dan durasi harus ada agar animasi bisa jalan, animation adalah properti shorthand (penulisan pendek) dari settingan animasi berikut:

 animation-name: example;
animation-duration: 5s;
animation-timing-function: linear; /* ease, ease-in, ease-out, ease-in-out, cubic-bezier */
animation-delay: 2s;
animation-iteration-count: infinite; /* number, inherit, initial */
animation-direction: alternate; /* normal, reverse, alternate-reverse */

///&gt; @keyframes namaAnimasi tag ini berfungsi membuat animasi keyframes

Sebagai tambahan, saya kasi 1 trik untuk centering element (menaruh elemen ditengah-tengah wadah/container)

 position: fixed; /* atau absolute */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* top = Y, left = X, translate(x, y, z)*/

Nah.....gimana gan? belajar CSS itu sangat menarik kan? klo agan suka tutorial ini, silahkan klik LIKE jika ada yg tidak di mengerti atau ada pertanyaan, silahkan komen dibawah akhir kata,...... Keep Sharing :)