Fotoğrafları CSS ile Döndürme

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

    Hem twitter hem instagram eklentisini kullanıyorum. Gerçekten çok iyi. Fiyatı da gerçekten çok çok uygun. Elinize sağlık. Facebook için de bir çözüm bekliyoruz.
  • Nebi GARCI CAN

    güzel
  • Nebi GARCI Misafir

    s.a abi bu kod meselesini bende bir çoğü gibi kullanıyorum malum uzere kodlarada limit getirildi. 1: ana sayfadaki yani akıştaki her twite rt fav kodu 2 : rt yapılan twit sahibini takibe alma kodu (bu kod çok çok önemli çünkü artık cogunluk rt guruplarına yöneldi bu yuzden ana sayfamıza takibinde ol...
  • Nebi GARCI Yaşar Semih Özdalcı

    Twitter'da takipçinizi arttırmak için çok basit bir sistem.
  • Nebi GARCI Nebi Garcı

    Maalesef bazı hesaplarda bu sorun var hocam. Bildiğim bir yöntem de yok açıkçası.