Etiket: css animasyon

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.