Fotoğrafları CSS ile Döndürme

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

    Neyi geri almak istiyorsunuz
  • Nebi GARCI Nebi Garcı

    Güncellendi
  • Nebi GARCI Misafir

    Merhaba unfollow kodu çok güzel çalışıyor emeğinize sağlık. Ancak çok hızlı unfollow ediyor 5 dakıka sonra limit yiyor bir kaç dakika sonra deneyin diye acaba daha yavaş unfollow yapması için bir düzenleme yapma şansınız var mı?
  • Nebi GARCI Misafir

    DM özelliği geliştirilse müthiş olur. Mesela takipçilerime teşekkürler mesajı yollarken hata oluşuyor sayfayı yenileyip başa dönmem gerekiyor bu yüzden aynı kullanıcılara tekrar DM atmayabilir. İkinci olarak otomatik takipteki gibi DM atma işlemi bitince kendiliğinden diğer hesaplara geçip ordakiler...
  • Nebi GARCI Nebi Garcı

    Eklenti güncellendi. Seçeneklerdeki bağlantıyı kullanabilirsiniz.