Cara Membuat Gambar Melengkung Dan Berputar

Cara Membuat Gambar Melengkung Dan Berputar - Sudah begitu banyak tutorial yang pernah saya tuliskan tentang cara membuat gambar di postingan dengan berbagai efek, dari gallery gambar, album image personal sampai tampilan gambar 3D yang semuanya bisa Anda pilah-pilih di »Efek Gambar By. Sahabat Blogger 77. Namun untuk tampilan gambar kali ini saya buat berbeda dengan efek melengkung dan berputar. Unik, menarik dan desain terbaru dari saya untuk sahabat semua, seperti tampilan gambar berikut:

Saat melihat artikel tentang »Cara Membuat Carousel Gambar 3D Dengan CSS Transform, terinspirasi ingin membuat efek yang sama, namun saya akan coba mengubah keseluruhan tampilannya menjadi individual show (1 tampilan gambar), karena memang efek ini  menggunakan elemen perintah yang sama yaitu transform-rotate untuk membuat gambar bergerak dan berputar, sedangkan untuk membuat tampilan gambarnya terlihat melengkung, kita hubungkan semua sisi gambar, lalu kita tarik sisi miringnya dengan jarak tertentu seperti ini:

.gambar {
 transform-style:preserve-3d;
 transform:rotateX(35deg)rotateY(45deg)rotateZ(15deg)translate3d(325px,-70px,50px)
}

Selanjutnya gambar kita pecah lagi menjadi beberapa bagian dengan ukuran 33px, lalu pecahan inilah yang akan kita bentuk menjadi gambar melengkung dengan jarak posisi pada background per selisih 33px, selisih kemiringan 7.5px, susunannya seperti ini:

.curve div {
  position: absolute;
  background: #000 url(URL-Gambar Anda);
}

//pecahan gambar (background-position)
.curve .a {background-position:0 0;transform:rotateY(0deg) translateZ(248px)}
.curve .b {background-position:759px 0;transform:rotateY(7.5deg) translateZ(248px)}
.curve .c {background-position:726px 0;transform:rotateY(15deg) translateZ(248px)}
....
....
.curve .x {background-position:33px 0;transform:rotateY(172.5deg) translateZ(248px)}

Dan hasilnya :

DEMO SHOW

Dibilang mudah, tidak juga tetapi dibilang susah, cukup mudah kok, hehe..!! hal yang tersulit untuk membuat gambar melengkung lalu berputar seperti ini hanya pada pembagian saat menentukan selisih pecahan gambar, karena dimensinya harus tepat agar tampilan gambar terlihat melengkung,
Oh iya, buat Anda yang ingin menampilkan efek seperti ini pada gambar postingan, cukup salin kode-kode berikut, namun sebelumnya tambahkan beberapa kode untuk mendukung vendor peramban agar efek dapat bekerja pada browser yang Anda gunakan. Kode lengkapnya seperti ini:

CSS Element

<style type="text/css">
#container {
  margin:40px 0 0 35%;width:550px;
  -moz-perspective:900px;-webkit-perspective:900px;
  -ms-perspective:900px;-o-perspective: 900px;perspective:900px}

#frame {
  width:33px;-moz-transform-style:preserve-3d;
  transform-style:preserve-3d;
  transform:rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px,-70px,50px)}

.curve {transform-style: preserve-3d;animation: curve 25s infinite linear}
.curve div {
  position: absolute;background: #000 url(URL-Gambar Anda);
  border: solid 2px yellow;border-width: thin 0;
  height:320px;width:34px;opacity: 1}

.curve .a {background-position:0 0;transform:rotateY(0deg) translateZ(248px)}
.curve .b {background-position:759px 0;transform:rotateY(7.5deg) translateZ(248px)}
.curve .c {background-position:726px 0;transform:rotateY(15deg) translateZ(248px)}
.curve .d {background-position:693px 0;transform:rotateY(22.5deg) translateZ(248px)}
.curve .e {background-position:660px 0;transform:rotateY(30deg) translateZ(248px)}
.curve .f {background-position:627px 0;transform:rotateY(37.5deg) translateZ(248px)}
.curve .g {background-position:594px 0;transform:rotateY(45deg) translateZ(248px)}
.curve .h {background-position:561px 0;transform:rotateY(52.5deg) translateZ(248px)}
.curve .i {background-position:528px 0;transform:rotateY(60deg) translateZ(248px)}
.curve .j {background-position:495px 0;transform:rotateY(67.5deg) translateZ(248px)}
.curve .k {background-position:462px 0;transform:rotateY(75deg) translateZ(248px)}
.curve .l {background-position:429px 0;transform:rotateY(82.5deg) translateZ(248px)}
.curve .m {background-position:396px 0;transform:rotateY(90deg) translateZ(248px)} 
.curve .n {background-position:363px 0;transform:rotateY(97.5deg) translateZ(248px)}
.curve .o {background-position:330px 0;transform:rotateY(105deg) translateZ(248px)}
.curve .p {background-position:297px 0;transform:rotateY(112.5deg) translateZ(248px)}
.curve .q {background-position:264px 0;transform:rotateY(120deg) translateZ(248px)}
.curve .r {background-position:231px 0;transform:rotateY(127.5deg) translateZ(248px)}
.curve .s {background-position:198px 0;transform:rotateY(135deg) translateZ(248px)}
.curve .t {background-position:165px 0;transform:rotateY(142.5deg) translateZ(248px)}
.curve .u {background-position:132px 0;transform:rotateY(150deg) translateZ(248px)}
.curve .v {background-position:99px 0;transform:rotateY(157.5deg) translateZ(248px)}
.curve .w {background-position:66px 0;transform:rotateY(165deg) translateZ(248px)}
.curve .x {background-position:33px 0;transform:rotateY(172.5deg) translateZ(248px)}

@keyframes curve {
from {transform:rotateY(0)}
to {transform:rotateY(-360deg)}}
</style>

HTML Markup

<div id="container">
   <div id="frame">
      <div class="curve">
         <div class="a"></div>
         <div class="b"></div>
         <div class="c"></div>
         <div class="d"></div>
         <div class="e"></div>
         <div class="f"></div>
         <div class="g"></div>
         <div class="h"></div>
         <div class="i"></div>
         <div class="j"></div>
         <div class="k"></div>
         <div class="l"></div>
         <div class="m"></div>
         <div class="n"></div>
         <div class="o"></div>
         <div class="p"></div>
         <div class="q"></div>
         <div class="r"></div>
         <div class="s"></div>
         <div class="t"></div>
         <div class="u"></div>
         <div class="v"></div>
         <div class="w"></div>
         <div class="x"></div>
      </div>
   </div>
</div>