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:

Curve image


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, bukan seperti efek-efek berikut:

» 4 Variasi Slide Teks Pada Gambar
» Kumpulan Ragam Efek Pada Gambar
» Tampilkan Foto Kecil Saat Gambar Utama Dihover
» Membuat Menu Blogger Dengan Target Gambar



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>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Membuat Gambar Melengkung Dan Berputar
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

16 komentar

  1. anak wp nyimak ajha mbak devy :-)
    udah lama tak berkunjung kesini.
    gimana kabarnya mbak :-p

    BalasHapus
  2. wah, template ini semakin flash saja ya mbak, luar biasa penampilan blog ini semakin kesini nya :D

    BalasHapus
  3. liat demo show gambar melengkung dan muternya...sungguh aih...aih...aih banget deh ih.... beneran pinter banget sih neng?
    makannya apaan coba?

    BalasHapus
    Balasan
    1. ellleh..elleh siakang mah bisaan bae, biasa attuh kang, cuma sekedar berbagi hal yang unik-unik dari devy yang imut-imut, hehe..!!

      Hapus
    2. makannya tetap nasi mas cilembu, tapi model makannya itu yang berbeda kali heehee

      Hapus
    3. beberapa bulan ini makannya bukan nasi kok mas, karena takut kalau ternyata nasi itu bersumber dari beras palstik, hehe..!!

      jadi kembali kezaman dahulu, makan UBI mang lembu

      Hapus
  4. Keren mba liat hasil demo'a :))

    BalasHapus
  5. Wiih, dapet ilmu lagi nih :) (h) (o)
    Siip deh :)

    BalasHapus
    Balasan
    1. emang sudah berapa mbak punya koleksi ilmu..? hehe..

      Hapus
    2. kogk saya ga dikasih ilmunya sich mbak.

      Hapus
    3. bukan untuk dibagikan mas, tetapi untuk koleksi.

      Hapus
  6. Singgah sekejab ya smbl ngopi (c) .... mau liat artkel ya terbaru....

    BalasHapus
  7. Terimakasih ya gan atas pengetahuanya, Salam kenal gan,.,.,

    BalasHapus
  8. Vy.. napa gambarnya tdk bisa disesuaikan dgn posisi tulisan di dalam postingan ya?

    contohnya; gambar menutupi tulisan.. kan biasanya kalo sy buat post.. gambar disimpan di tengah2 bgitu..

    klw untk efeknya, bekerja dgn baik.. cuma yg inih sja..gambarnya menutupi tulisan dan ukurannya seperti di demonya, sdh coba merubah point2nya, namun hasilnya.. nihil.. ada solusi nda?..

    BalasHapus
  9. gan backlink sudah saya buat di blog saya, mohon di cek ya gan

    www.mitrasewajasa.com

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK