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: ///> perspective tag ini berfungsi menentukan bagaimana perspektif elemen 3D akan dilihat ///> transform tag ini berfungsi memberikan transformasi 2D/3D pada elemen ///> translateX/Y/Z tag ini berfungsi memberikan efek translasi 3D pada sumbu X/Y/Z ///> 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 */
///> @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 :)
avatar maddock

Ditanyakan oleh @maddock

119 Kontribusi 114 Poin

Login untuk menanggapi


Jawaban

Sangat menarik gan
avatar miswanto1509

Dijawab oleh @miswanto1509

62 Kontribusi 15 Poin

Login untuk menanggapi


Terima Kasih gan, semoga bisa memberi semangat buat terus belajar
avatar maddock

Dijawab oleh @maddock

119 Kontribusi 114 Poin

Login untuk menanggapi


Cuplikan layar 2016-05-06 21:36:02.png gagal gan gimana kok gak nampil mohon pencerahannya
avatar samman

Dijawab oleh @samman

22 Kontribusi 3 Poin

Login untuk menanggapi


yg agan taruh dibagian css itu adalah scss gan, agan copy yg dari codepen ya? klo editor agan ada plugin scss compiler, pasti muncul hasilnya gan coba agan copy kode css yg disini dulu, masalah SCSS bisa agan cari di google klo ada yg ditanyakan bisa komen disini
avatar maddock

Dijawab oleh @maddock

119 Kontribusi 114 Poin

Login untuk menanggapi


kalo mau perbesar ukuran kubusnya gmn pak
avatar dedeherman

Dijawab oleh @dedeherman

1 Kontribusi 0 Poin

Login untuk menanggapi


Login untuk gabung berdiskusi