YAZILAR

Bu yazıda birkaç adımda nasıl kolayca çevrilebilir (flipable) kart yapacağımıza bakıyor olacağız.

Öncelikle aşağıdaki demodan nasıl göründüğünü görelim ve deneyelim.

Şimdi de kodlarımızı görelim.

Yukarıda card class’ımızın içerisinde 2 adet olmak üzere ön ve arka yüzümüz bulunmakta.

İki adet kart yüzümüz bulunmakta. Normal ve çevrilmiş yüzler.

.cardFace class’ımızdaki önem olan özelliğimiz, backface-visibility. Bu özelliğin değerini hidden değerini verdiğimizde element arkası çevrildiğinde arkasının gözükmemesi sağlanıyor.

Diğer önemli özelliğimiz ise transform-style. Bu özelliğe preserve-3d değerini verdiğimizde döndürme işlemi uygulandığında 3d olarak dönmesini sağlıyor.

Javascript dosyamız ise aşağıdaki gibi olması gerekiyor.

Yukarıda .card class’ı kullanan elementimizin click etkinliğini dinledik. Bu elemente tıklandığında kendi class’ına .flipped class’ını ekleyip çıkaracak.

Bu şekilde kolayca çevrilebilir kart yapabilirsiniz.

Github reposunu görmek için buraya tıklayabilirsiniz.