flip resim
Css3 geçişler ve dönüşümler ile hazırlanmış bir galeri örneği. Bu galeri örneği ile çok güzel 3D dödnürme animasyonuna sahip resim galeriler oluşturabilirsiniz. İki tabakadan oluşan Css çerçevelerin birinci tabakasında resimler ikinci tabakasında ise resim açıklamaları bulunuyor mouse ile resmin üzerine geldiğinizde ise çerçeve 180 derece dönüyor ve resmin açıklaması görünüyor. Mouseyi geri çektiğinizde ise aynı işlem tam tersine çalışıyor bu sefer ve çerçeve tekrar 180 derece dönüp resimler görünüyor.

Aslında ilk başta  sadece   bir çevirme efekti hazırladım sağdan  soldan topladığım kodlar  ile. Böyle bir  efekt için  en kullanışlı olabilecek bölüm resim galeri bölümü olur diye  ufak bir resim galerisi  hazırladım. Biraz  daha uğraşıp arka tarafta  bulunan resim açıklamalarınada tıklanabilir  bir  buton eklemek  istedim ama o  kadar boş zamanı olan birisi değilim. Eh artık  onuda  siz  yaparsınız.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css – Js dosya adresi :


  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

Demo örneğinde  8 adet resim bulunuyor  yazı fazla uzamasın diye buraya sadece iki resmin kodunu ekliyorum. Kopyala yapıştır yaparak çoğaltabilirsiniz.

 

 

 

  • Nature

 

  • Çevir

     

 

 

 

 

  • Nature

 

  • Çevir

     

 

 

 

 

  • Nature

 

  • Çevir

     

 

 

 

 

  • Nature

 

  • Çevir

     

 

 

 

 

  • Nature

 

  • Çevir

     

 

 

 

 

  • Nature

 

  • Çevir

     

 

 

 


Bu Yazıyı Paylaş

1 yorum "Mouse ile üzerine gelince resimler dönsün – Flip-Images"

  1. bünyamin dedi ki:

    Teşekkurler güzel bi paylasım

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla