Fotoğrafları CSS ile Döndürme

22 04 2012 12:29 tarihinde, Css, Web Tasarım kategorisinde yazıldı. 2 yorum yapıldı, 10226 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
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 Rıfat

    Eklentiyi yaklaşık 20 gündür kullanıyorum. Öncelikle eklenti verdiğimiz paranın üzerinde değerde onu belirtebilirim, Helali hoş olsun. Her hangi bir hesaba girip takip etme seçimiyle o hesabı takip edenleri veya hesabın takip ettiklerini rahatlıkla takip edebiliyorsunuz. Beğeni içinse söyleyecek bir...
  • Nebi GARCI Misafir

    hocam sadece bizi takip edenleri takipten çıkma seçeneğine ihtiyacımız var.
  • Nebi GARCI Misafir

    toplu takip kodunu guncelleyecekmisin
  • Nebi GARCI Nebi Garcı

    ssd alacaksanız kesinlikle birleştirmeyin. Birleştirme olur mu ondan da emin değilim ama yani ssd normal diskten kat kat hızlı en azından sistemi ssd ye kurun ki işler hızlı olsun
  • Nebi GARCI Misafir

    teşekkur ederim hemen bakıyorum