Dönen Sosyal medya [css + Başınız dönecek]

[Bamboo]

Merhabalar

İnternet sörfünden geliyordum size ufak bir bilgi verim dedim gözüme çarptı ve güzel birşey

Anlatıma başlıyorum

Şimdi bu kodlarla sosyal medyanın üzerine gelince mause imleci sosyal mesaya ikonu +360 ,+60 , -360 derece dönüyor ben size ayrıntılı ayrıntılı kodları vereceğim

+360 kodu

Kod:

<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);
}
</style>
<p id="socialicons">
<a href="RSS ADRES">
<img border="0" src="images/sosyal/rss.png" /></a>
<a href="DELİCİOUS ADRES">
<img border="0" src="images/sosyal/delicious.png" /></a>
<a href="fACEBOOK ADRES">
<img border="0" src="/images/sosyal/facebook.png" /></a>
<a href="TWİTTER ADRES">
<img border="0" src="images/sosyal/twitter.png" /></a>
<a href="YAHOO ADRES">
<img border="0" src="images/sosyal/yahoo.png" /></a>
</p>

+60 Kodu

Kod:

<style>
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);
}
</style>
<p id="socialicons2">
<a href="RSS ADRES">
<img border="0" src="images/sosyal/rss.png" /></a>
<a href="DELİCİOUS ADRES">
<img border="0" src="images/sosyal/delicious.png" /></a>
<a href="fACEBOOK ADRES">
<img border="0" src="/images/sosyal/facebook.png" /></a>
<a href="TWİTTER ADRES">
<img border="0" src="images/sosyal/twitter.png" /></a>
<a href="YAHOO ADRES">
<img border="0" src="images/sosyal/yahoo.png" /></a>
</p>

-360 Kodu

Kod:

<style>
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 id="socialicons3">
<a href="RSS ADRES">
<img border="0" src="images/sosyal/rss.png" /></a>
<a href="DELİCİOUS ADRES">
<img border="0" src="images/sosyal/delicious.png" /></a>
<a href="fACEBOOK ADRES">
<img border="0" src="/images/sosyal/facebook.png" /></a>
<a href="TWİTTER ADRES">
<img border="0" src="images/sosyal/twitter.png" /></a>
<a href="YAHOO ADRES">
<img border="0" src="images/sosyal/yahoo.png" /></a>
</p>

Yukarıdaki kodlarıın hiçibiri ayırmadan ekleyeceğiniz yere ekleyin ama tek düzenlemeniz gereken yer adresler oralarıda kendinize göre düzenleyin


Ben yaptım oldu size tavsiye ediyorum...

Önizleme ve Alıntı yaptığım site:

Kod:

http://www.dynamicdrive.com/style/csslibrary/item/spinning_icons_using_css3_transform/

Teşekkürler.

İcon dosyasını "images"in içine atın yeter

[xpserkan]

İE'de tam randımanlı çalışmıyor ancak diğer tarayıcılarda güzel . Paylaşım için teşekkürler hocam..

[FanPageWan]

Verdiğiniz kodları nereye yerleştiricez ? anasayfa index inemi

[Bamboo]

(24.03.2012, Saat: 23:07)FanPageWan Adlı Kullanıcıdan Alıntı: Verdiğiniz kodları nereye yerleştiricez ? anasayfa index inemi

Nerede göstermek isterseniz oraya ister headre ister index'e ister postbit'e