Efek Berputar pada Gambar dengan CSS

5/5 (2)
efek-gambar-berputar-dengan-css
Efek Berputar pada Gambar dengan CSS

Efek Berputar pada Gambar dengan CSS – Bagaimana cara membuat efek gambar berputar menggunakan CSS? Cara ini bisa digunakan sebagai alternatif untuk kalian yang kurang mahir dalam menggunakan aplikasi editor gambar.

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996 – devaradise.com

Baca juga: Perbedaan ID dan CLASS pada CSS

Beberapa hari lalu saya diminta salah satu teman untuk membuat gambar berputar, entah menggunakan photoshop atau aplikasi editor gambar lainnya-saya juga tidak paham dengan design grafis. Ketika saya tanya untuk apa, teman saya menjawab untuk diletakkan dalam website nya. Lalu saya menawarkan pendapat yang agak nyeleneh. Untuk alternatifnya, saya buat efek gambar berputar menggunakan CSS.

Dengan beberapa baris kode CSS, kita sudah bisa membuat efek gambar berputar. Langsung saja, berikut adalah kode CSS nya;

.rotate {
animation-name: rotate ;
animation-duration: 5s;
animation-play-state: running;
animation-timing-function: linear;
animation-iteration-count: infinite;
opacity: 1.0;filter: alpha(opacity=50);
}

img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}

@keyframes rotate{
10% {transform:rotateY(36deg)}
20% {transform:rotateY(72deg)}
30% {transform:rotateY(108deg)}
40% {transform:rotateY(144deg)}
50% {transform:rotateY(180deg)}
60% {transform:rotateY(216deg)}
70% {transform:rotateY(252deg)}
80% {transform:rotateY(288deg)}
90% {transform:rotateY(324deg)}
100% {transform:rotateY(360deg)}
}

Penggunaan pada HTML sebagai berikut,

<img class="rotate" src="urlgambar" />

Untuk hasilnya, kalian bisa lihat di arc.codelatte.org/gambar-berputar.

Bagaimana? Berhasil? Teringat pepatah, Banyak jalan menuju Roma. Selama tujuannya sama, kita bisa melakukan nya dengan berbagai cara. Kali ini adalah contohnya😛 Sekian pembahasan tentang Cara Membuat Efek Berputar pada Gambar dengan CSS. Sammpai jumpa pada artikel selanjutnya!

 

Kalian punya template portfolio keren yang ingin kalian publikasikan? Submit karya kalian di Codelatte ArchiveCode Archive menyediakan media untuk ide kreatif berupa portfolio dari desainer & developer yang tidak kalah kreatif pula.

Please rate this

Abay

Cheers, I am Abay and I make things for fun. Gudang Garam and Coffee i can't live without. I love turning exciting ideas into horrible code. And .. i'm a lil' boy currently living Indonesia. Want to buy me a coffe? Let's talk, abay@codelatte.org

2 tanggapan untuk “Efek Berputar pada Gambar dengan CSS

  • 11 Agustus 2018 pada 8:32 PM
    Permalink

    Attractive element of content. I simply stumbled upon your site
    and in accession capital to claim that I acquire actually loved account your weblog posts.
    Any way I’ll be subscribing on your augment and even I fulfillment you get right of entry to constantly fast.

    Balas
  • 17 Agustus 2018 pada 2:20 AM
    Permalink

    It’ѕ remarkable too vіsit this web page andd reаding
    the views off all mates on the topic of this post, while
    I am also keen of gettting knowledge.

    Balas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *