Fotoğrafları CSS ile Döndürme

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

    Yazının altına not düştüm kaldırıldığında
  • Nebi GARCI yorumcu

    eklentinizi güncelleyin.
  • Nebi GARCI yorumcu

    Bu özellik twitterdan kaldırılmış. Link kırık ve mevcut profilimdeki mesaj butonu ve saatler kaldırılmış..
  • Nebi GARCI Misafir

    takip işlem sırasına alıyor fakat başlamıyor hocam çözümü nedir acaba
  • Nebi GARCI Misafir

    Merhaba, bu islemi yapmam icin oncelikle tarayicidan instagram sifremi girmem mi gerekiyor.Cunku beni engelleyen birini benimde engelleyebilmem icin login olup engelle butonuna basmam gerekmiyor mu?