360 Derece Dönen Resim Kodu

Fare Tetikli Dönen Resim Kodu

Mause ile üzerine gelindiğinde etrafında bir tur atarak güzel bir efekt veren faydalı bir kod . 360 derece dönerek güzel bir efekt veriyor.

<style type="text/css">
  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>
<center>
<p id="socialicons" style="text-align: left; ">
  <a href="Yönlendirilecek URL">
<img border="0" src="Resim URL" width="Genişlik değeri girin" height="Yükseklik değeri girin" alt="" /></a> </p>
</center>

<a href="Yönlendirilecek URL"> : Tıklandığında gidilmesini istenen site adresi.
src="Resim URL" : Resim adresi.
width="Genişlik değeri girin" height="Yükseklik değeri girin"  : Resim boyutları px yada % olabilir.


HTML / JAVASCRIPT EKLEMEK

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.



* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod Editörünü kullanabilirsiniz.