CSS ile Çevirme (Flip) Animasyonu Yapalım

CSS ile Çevirme (Flip) Animasyonu Yapalım

Fare ile üzerine geldiğimizde yatay ya da dikey olarak çevrilen ve ön arka yüzleri olan animasyonları nasıl yapacağımızı bu derste öğreneceğiz. Yararlı olması dileğiyle..

İlk olarak html yapımızı oluşturalım;

<div class="flipper">
    <div class="flip-content">
    
        <!-- ön yüzü -->
        <div class="front">
          ön yüzü :)
        </div>
    
        <!-- arka yüzü -->
        <div class="back">
          arka yüzü :(
        </div>
    
    </div>
</div>

İlk olarak nesnelerimize genişlik ve yükseklik verelim;

.flip-content, .front, .back {
     width: 300px;
     height: 300px
}

Şimdi ise dönüş hızını ayarlayalım;

.flip-content {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative
}

ön ve arka yüze position değerleri verelim, daha sonra dönüş esnasında arka yüzü gizleyelim;

.front, .back {
     position: absolute;
     top: 0;
     left: 0;
     backface-visibility: hidden;
     background-color: #eee
}

Ön yüzün önde durması için z-index değerini artıralım;

.front {
     z-index: 1
}

arka yüzü y ekseninde 180 derece döndürelim;

.back {
     transform: rotateY(180deg)
}

Ve şimdi nesnenin üzerine geldiğimizde ön yüzü gizleyip arka yüzü ön plana çıkartalım;

.flipper:hover .flip-content {
     transform: rotateY(180deg)
}

Son olarak daha iyi bir dönüş için perspektifini ayarlayalım;

.flipper {
    perspective: 1000px
}

İşte bu kadar 🙂 Demoya göz atabilir, kaynak dosyaları indirip inceleyebilirsiniz.

Not: Tarayıcı uyumluluğu için prefixleri eklemeyi unutmayın. Tek tek uğraşmak yerine prefixfree eklentisini kullanabilirsiniz;
https://leaverou.github.io/prefixfree/


Dikey Çevirme

Eğer yatay değilde dikey olarak çevirmek isterseniz aşağıda şekilde değiştirmeniz yeterli;

.back {
    transform: rotateX(180deg)
}
.flipper:hover .flip-content {
    transform: rotateX(-180deg)
}

Eksi değerini kaldırırsanız tam tersi dikey çevirme olacaktır.

Demo
http://www.erbilen.net/demo/css-flip/index.html

İndir
css-flip.zip

Teşekkürler: http://davidwalsh.name/css-flip

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“CSS ile Çevirme (Flip) Animasyonu Yapalım” üzerine 5 yorum

  1. Öncelikle çok güzel bir çalışma olmuş hocam eline sağlık. Fakat İE'de üzerine gelince ilk resmi çeviriyor… yani 2. resim görünmüyor… nasıl çözebiliriz ?

  2. @veysel, 10. sürümde sanırım çalışıyor. Ancak alt sürümleri için şuan yapabileceğimiz bir şey yok gibi gözüküyor.. transform özelliğini filter ile yapabiliriz ancak geri kalan özellikler yine olmayacağından bir anlamı kalmaz.

  3. IE 10 öncesinde Css Animastions desteği zaten yok, kullanamazsınız. IE 10 üzerinde de hatalı gösteriyor, şimdilik bu işi jquery ile yapmak daha mantıklı gibi 🙂

    Bu arada JQUERY videolarına devam edecek misiniz ? 26 da kalmış sanırım, şu an izliyorum gerçekten çok iyi bir seri hazırlamışsınız elinize sağlık.

Bir Cevap Yazın

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