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.