Membuat Efek Berputar dengan CSS3 Transform
Sebuah efek yang diciptakan dengan gambar yang dapat berputar sesuai dengan porosnya. Hal ini terbentuk dengan menggunakan CSS3's transform: rotate(xdeg) property. Dengan ini Anda dapat memutar elemen beberapa derajat, baik searah jarum jam maupun sebaliknya atau dapat melakukan dua arah perubahan sekaligus.
(+) positif di dalam transform: rotate(xdeg) dapat memutar elemen searah jarum jam. sementara negatif (seperti:-360deg) dapat berputar sebaliknya. property ini dapat mendefinisikan animasi yang diciptakan, baik pada saat onMouseOver atau pada saat onmouseout.
Demo :
Letakan Cursor pada Gambar atau Icon untuk melihat Efek Berputar...360 derajat putaran onMouseover and onMouseout
60 derajat putaran onMouseover and onMouseout
-360 derajat putaran onMouseover ONLY
More Detail :
Kode CSS
<style>
p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}
p#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>
p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}
p#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>
Kode HTML
<p><b>360 degree spin onMouseover and onMouseout</b></p>
<p id="socialicons">
<a href="#"><img border="0" src="rss.png"/></a>
<a href="#"><img border="0" src="delicious.png"/></a>
<a href="#"><img border="0" src="facebook.png"/></a>
<a href="#"><img border="0" src="twitter.png"/></a>
<a href="#"><img border="0" src="yahoo.png"/></a>
</p>
<p id="socialicons">
<a href="#"><img border="0" src="rss.png"/></a>
<a href="#"><img border="0" src="delicious.png"/></a>
<a href="#"><img border="0" src="facebook.png"/></a>
<a href="#"><img border="0" src="twitter.png"/></a>
<a href="#"><img border="0" src="yahoo.png"/></a>
</p>
Keterangan :
Letakan kode CSS kedalam tag <head> dan kode HTML kedalam tag <body> atau dimanapun anda ingin memasang Efek Berputar ini kedalam sebuah element pada halaman website anda.Untuk gambar atau element lain yang akan diberikan efek berputar ini, silahkan letakan kedalam Kode HTML seperti contoh diatas, pada text yang sudah diberi warna merah.
sumber: dynamicdrive
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon