MyBB Destek Forumu

Orjinalini görmek için tıklayınız: Dönen Sosyal medya [css + Başınız dönecek]
Şu anda (Arşiv) modunu görüntülemektesiniz. Orjinal Sürümü Görüntüle internal link
Merhabalar

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

Anlatıma başlıyorum Sırıtmak

Ş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
İE'de tam randımanlı çalışmıyor ancak diğer tarayıcılarda güzel . Paylaşım için teşekkürler hocam..
Verdiğiniz kodları nereye yerleştiricez ? anasayfa index inemi
(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