Membuat efek 3 dimensi pada gambar

Membuat efek 3 dimensi pada gambar

  21 February    Andika

---

Efek 3 dimensi pada gambar yang akan saya bagikan kali ini bisa di bilang cukup unik dan menarik.

Semua kodenya murni mengandalkan CSS. Dan sekali lagi, kode CSS yang saya bagikan hanya sekedar contoh dan tentu saja butuh penyesuaian lebih lanjut agar tampilannya bisa di sesuaikan dengan ke inginan.

Untuk melihat efeknya, silahkan hover atau arahkan kursor pada area gambar.

Berikut Demonya,

Kode CSSnya

.thumb {
  width:400px;
  height:400px;
  margin:20px auto;
  perspective:1000px;
}

.thumb a {
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url("url gambar");
  background-size:0,cover;
  transform-style:preserve-3d;
  transition:all 0.5s;
}

.thumb:hover a {
  transform:rotateX(80deg);
  transform-origin:bottom;
}

.thumb a:after {
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:36px;
  background:inherit;
  background-size:cover,cover;
  background-position:bottom;
  transform:rotateX(90deg);
  transform-origin:bottom;
}

.thumb a span {
  color:white;
  text-transform:uppercase;
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  font:bold 12px/36px serif;
  text-align:center;
  transform:rotateX(-89.99deg);
  transform-origin:top;
  z-index:1;
}

.thumb a:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  box-shadow:0 0 100px 50px rgba(0,0,0,0.5);
  transition:all 0.5s;
  opacity:0.15;
  transform:rotateX(95deg) translateZ(-80px) scale(0.75);
  transform-origin:bottom;
}

.thumb:hover a:before {
  opacity:1;
  box-shadow:0 0 25px 25px rgba(0,0,0,0.5);
  transform:rotateX(0) translateZ(-60px) scale(0.85);
}

Jangan lupa untuk mengganti URL GAMBAR pada kode CSSnya.

Kode HTMLnya

<div class="thumb">
    <a href="#">
    <span>Judul Gambar</span>
    </a>
</div>

Jangan lupa untuk mengganti # dengan url yang di inginkan dan Judul dari gambar yang akan di tampilkan.