Efek Berputar pada Gambar 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;

[css].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)}
}[/css]

Penggunaan pada HTML sebagai berikut,

[html]
[/html]

Untuk hasilnya, kalian bisa lihat di arc.codelatte.id/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 Archive. Code Archive menyediakan media untuk ide kreatif berupa portfolio dari desainer & developer yang tidak kalah kreatif pula.