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.
-
Çevir
-
Çevir
-
Çevir
-
Çevir
-
Çevir
-
Çevir
Teşekkurler güzel bi paylasım