Fotoğrafları CSS ile Döndürme

22 04 2012 12:29 tarihinde, Css, Web Tasarım kategorisinde yazıldı. 2 yorum yapıldı, 8870 kez okundu

rotate-image-resimWeb Sitenizde görsellik ve farklılık sizin için önemliyse görsellerinizi ve diğer objelerinizi “hover” yani üzerine geldiğinde ya da “active” yani tıklandığında istediğiniz açıda ve istediğiniz hızda döndürebilirsiniz.

Şimdi isterseniz kodlarımızı tanımlayalım.

Rotate

rotate kodu döndürme işlemimizi gerçekleştirmek için kullanacağımız kod.

elimizde sitemizde herhangi bir yerde bulunan bir resme ait style kodu olsun.


#rastgele img {position:absolute, widht:20px; height:40px;}

Yukarıda bir resme ait yükseklik genişlik ve pozisyon değerleri verilmiş. Biz bu resmi önce üzerine gelince döndürelim.


#rastgele img:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}

şimdi bu kod sayesinde resmimiz döner. burada

-webkit-transform bu sadece webkit tarayıcılar için. Chrome, yandex, comodo gibi..

-moz-transform mozilla firefox için

-o-transform opera için

-ms-transform internet explorer için

(360deg) Değeri ise kaç derecelik döneceğini belirler. 

#rastgele img:hover Burada ise “hover” ekledik. Yani üzerine gelince aktif olmasını istedik. Eğer tıklanınca aktif olsun, yani dönsün isterseniz “hover” yerine “active” tanımlaması girmelisiniz.

Şimdi buraya kadar resmimiz 360 derece döner. Fakat dönüş daha estetik olması için resmimizi yavaşça döndüreceğiz. 

Bu kez resmimizin ilk haline yani üzerine gelince değil de pasifkenki özelliklerine ekleme yapacağız. Üzerine gelince kodumuzu şu şekilde tamamlamıştık.


#rastgele img:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}

Üzerine gelmediğimizde yani pasifken kodumuz ise bu şekildeydi.


#rastgele img {position:absolute, widht:20px; height:40px;}

Bu koda şu kodlarımızı ekleyeceğiz.

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

Yukarıda 1s ifadesi ne kadar hızla döneceğini belirler. 0.1 olarak en az dönüş hızına tekabül eder. 0 yaparsanız dönmez.

Şimdi kodlarımızı tamamlayalım. Bu fotoğrafın pasifken alacağı kod.


#rastgele img {position:absolute, widht:20px; height:40px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

Üzerine gelince ise şu şekilde olacak.


#rastgele img:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}

kaynak

Üzerine gelince yani “hover” tanımlamasında kodumuza ilk halindeki yükseklik genişlik ve pozisyon değerlerini eklemedik. Bu kafanızı karıştırmasın.

Demo için Ana sayfa daki sosyal paylaşım butonlarına bakabilirsiniz. Kafanıza takılan konuları yorum olarak alabilirim.

Bu konudaki düşüncelerinizi siz de yorum olarak paylaşabilir, aşağıdaki butonlar aracılığıyla daha çok kişiye ulaştırabilirsiniz.

Bunlar da İlginizi Çekebilir
Sponsorlu Bağlantılar
Bu Makale 2 Yorum Aldı. Siz Ne Düşünüyorsunuz?
  1. teşekürler güzel bilgilerin için

Sponsorlu Bağlantılar

Son Yorumlar

  • Nebi GARCI Kaan Doğan

    Nebi Bey'in bu aracını düşünmeden satın alabilirsiniz. Gerçekten çok emeği var harika. Süreklide geliştiriyor kendisi. Tavsiye ederim.
  • Nebi GARCI hamza

    instagram takip etme işleminde takıpçilerini değil de fotografa gelen beğenileri takip etme gibi bir şey yapabiilirmisiniz ?
  • Nebi GARCI Misafir

    twitlerimi silim dedimhep kendi twitlerimi begenmiş hocam ayıp
  • Nebi GARCI Misafir

    Aynısı ben de de var lütfen birisi söylesin kodu giriyorum lütfen yakın bir değer deneyiniz diyor yardımcı olun lütfen lütfen
  • Nebi GARCI Misafir

    abi merhaba çok güzel bişey bu fakat ben birisinin tweetlerini beğenmek istiyorum dediğiniz gibi kullanıcın adını sadece yazıyorum iyi hoşda yaparken onun yaptığı rtleride beğeniyor. rtlerini beğenmeyen bi kod yokmu anlamadım ben, yardımcı olursan sevinirim