Putar Gambar dengan CSS3 tanpa Javascript

Sudah lama sekali ya blog ini tidak membahas lagi tentang CSS3. Sekarang hampir semua browser sudah ditanamkan teknologi terbaru untuk melihat halaman suatu Web/blog yang berpenganut CSS3. Eh tapi sebelumnya CSS3 itu apa sih? Menurut wikipedia, CSS adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu website, baik tata letak, jenis huruf, warna, dan semua yang berhubungan dengan tampilan atau gaya suatu web sedangkan 3 disana dimaksudkan bahwa css tersebut versi ketiga.

Arahkan kursor kamu untuk melihat efeknya

Untuk penerapan efek itu gimana gan? ih si agan, itu mah mudah atuh, ente tinggal sisipin css berikut pada template agan, tepatnya di atas ]]></b:skin>

 .putar{ opacity: 0.05; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(720deg); -o-transform: rotate(720deg); -webkit-transform: rotate(720deg); -ms-transform: rotate(720deg); transform: rotate(720deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .putar:hover { opacity: 1; margin-left: 0px; -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand'); zoom: 1.3; -moz-box-shadow: 1px 1px 14px #aadd27; -webkit-box-shadow: 1px 1px 14px #aadd27; box-shadow: 1px 1px 14px #aadd27; }

Udah belum gan? belum atuh, itu mah baru naro cssnya aja, nah biar efeknya jalan maka ente harus sisipin class="putar" pada HTML gambar. Contohnya? lihat ke bawah yuk!

Saya kan punya HTML gambar nih
<img border="0" src="http://i1223.photobucket.com/albums/dd511/imukabuto/cooltext529715322.png" />

nah biar efek itu muncul pada gambar tersebut maka saya harus sisipkan class="putar" pada HTML gambar itu, jadinya seperti di bawah ini
<img border="0" class="putar" src="http://i1223.photobucket.com/albums/dd511/imukabuto/cooltext529715322.png" />

Semuoga membantu...

Artikel Terkait:

Blogger

• Cara membuat tombol minimize dan maximize
• Cara Membuat Daftar Isi Dengan Jquery
• Cara Membuat Kotak Area Dengan Efek Membesar Saat Disorot Mouse
• Cara Membuat Link Bergoyang Dengan Javascript
• Post Populer dengan Animasi
• Konten Bundar Slide
• Cara membuat Label cloud berputar di blog
• Pasang Modus Hemat Energi di Blog
• Membuat Tombol Top Up
• Gambar Dengan Efek Zooming di Blog
• Kotak Text Area Dengan Tombol Select All
• Cara Membuat Browser Berputar
• Cara Membuat Efek Coret Pada Postingan
• Image Gallery Menggunakan Jquery 1.4.2
• Cara Menampilkan Favicon Di Semua Browser
• Cara Membuat Random Post Di Blogger
• Cara membuat Artikel Terkait Dengan Gambar/Thumbnails
• Cara Mudah Pasang Emoticon Di Kotak Komentar
• Cara Pasang Head Line News
• Membuat Artikel Terkait Dengan Fungsi Scroll
• Cara Membuat Fitur Reply Pada Kotak Komentar
• Cara Mudah Membuat Recent Post Bergambar Dengan Efek Naik Tangga
• Cara menampilkan Icon Di Judul Postingan
• Memanipulasi Tampilan Jumlah Komentar