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:
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:
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 :
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>