Efek Rotate Pada Gambar Efek ini akan membuat Gambar memutar dan itu membuat kesenangan tersendiri bagi saya, tapi sayang yang mendukung efek ini hanya browser Google Chrome and Safari, Firefox 4 ke atas, dan opera mini, tapi semoga saja browser anda modern semua jadi bisa lihat Efek nya, kalau cuman Efek Rotate browser Firefox 4 ke bawah pun bisa melihat efek Rotate nya tapi karena Efek Rotate ini di sertai dengan Transition dimana efek transition ini gak semua browser support kecuali yang saya sebut - sebut di atas. tapi kalau browser nya gak mendukung palingan efek transitionnya gak kelihatan alias cuman efek Rotatenya saja yang kelihatan. ok langsung aja cek demo nya.
DEMO
Silahkan Arahkan Mouse anda ke gambar - gambar yang ada di postingan itu, dan lihatk efekX.
<style type='text/css'>
.SysteM {
margin:10px auto;
width:158px;
background:#6DE;
padding:5px 10px;
border:4px solid #999;
}
.SysteM img {
background:#CCC;
border:1px solid #555;
-webkit-transition: all 900ms ;
-moz-transition: all 900ms ;
-o-transition: all 900ms ;
transition: all 900ms ;
max-width: 99%;
display: block;
margin: 0 auto;
}
.SysteM img:hover {
-moz-transform:rotate(1800deg) scale(1.5);
-webkit-transform:rotate(1800deg) scale(1.5);
-ms-transform:rotate(1800deg) scale(1.5);
-o-transform:rotate(1800deg) scale(1.5);
transform:rotate(1800deg) scale(1.5);
}
</style>
<div class="SysteM">
<img src="URL gambar anda" />
</div>Penjelasan kode
900ms Adalah kecepatan berputarnya dalam milisecond semakin kecil nilainya semakin cepat putarannya.1.5 Adalah kode besar gambarnya jadi ketika anda sorot gambarnya akan membesar sebesar 1.5 scale jika ingin gambarnya mengecil gunakan nilai di bawah 1.5 bisa 1 atau 0.5 dan seterunya.
