CSS3 ile birlikte güzel animasyon efektlerini de artık sadece CSS kullanarak yapabilir hale geldik. Bu efektler arasında olan dönme efekti ile de sanki bir kartın ön ve arka yüzü varmış gibi gösterebilmemiz sitemiz için gerçekten güzel bir görsellik katıyor.

Nasıl bir görüntünün ortaya çıkacağını merak edenler alttaki butona basarak örneği görebilir:
 
Örneği görmek için tıklayın

HTML Kısmı

<div class="flipContainer">
	<div class="flip">
		<div class="on">
			<!-- ön içerik burada olacak -->
		</div>
		<div class="arka">
			<!-- arka içerik burada olacak -->
		</div>
	</div>
</div>

Buradaki divleri biraz açıklamak gerekirse:
flipContainer classına sahip divimiz bizim taşıyıcı(container) divimiz olacak ve bu div sayesinde içerisindeki divlerin perspektifi olacak
flip classına sahip divimiz ise dönecek olan divimiz. Bu dönme efektini istersek üzerine gelince de yapabiliriz. Ya da bir butona basıldığında bu dönmeyi tetikleyecek bir şekilde de yapabiliriz. Bu dersimizde ikisini de anlatıyor olacağız.
on ve arka classına sahip divlerimiz de adından da anlaşıldığı üzere bizim ön tarafta ve arka tarafta bulunan içeriklerin tutulduğu divler olacak.

CSS Kısmı

Şimdi gelelim önemli olan, efektleri tanımlayacağımız kısma. CSS kodlarını yazarken prefixleri gözardı ederek yazıyor olacağım. Siz tabi ki prefixleri ihmal edeyim demeyin. Sonra bu kod neden çalışmıyor bu tarayıcıda diyebilirsiniz 🙂

/* flip divini kaplayan alana perspektif veriyoruz */
.flipContainer {
	perspective: 1000;
}
/* flipContainer'ın üzerine gelindiğinde ya da bir butona basıldığında yapılacak olan transform */
.flipContainer:hover .flip, .flipContainer.hover .flip, .flipContainer.flipped .flip {
	transform: rotateY(180deg);
}

/* içeriklerin kaplayacağı divlere genel bir genişlik ve yükseklik verdik */
.flipContainer, .on, .arka {
	width: 400px;
	height: 300px;
}

/* dönüş hızını ve nasıl döneceğini de burada belirtiyoruz */
.flip {
	position: relative;
	transition: 0.6s;
	transform-style: preserve-3d;
}

/* dönüş sırasında arkaplanının gözükmesini istemediğimiz için arka kısımlarını hidden yapıyoruz */
.on, .arka {
	position: absolute;
	top: 0;
	left: 0;
	backface-visibility: hidden;
}

/* Ön kısmı arka kısmın üstüne taşıyoruz */
.on {
	z-index: 2;
	/* firefox 31 için gerekli transform */
	transform: rotateY(0deg);
}

/* başlangıçta gözükmeyen arka taraf */
.arka {
	transform: rotateY(180deg);
}

CSS kodlarının içinde elimden geldiğince açıklamalarda bulundum.
Bilmeyenler için CSS’de bulunan propertyleri biraz anlatmamız gerekirse:

  • perspective: 3D elementte kaç adet pixelin bulunacağını belirtiyoruz.
  • transform: Herhangi bir üzerine gelme(hover) veya javascriptle yapılan bir değişiklikte nasıl bir dönüşüm göstereceğini belirtiyoruz. Burada rotateY’de ise y ekseninde 180 derece döndüreceğimizi belirttik.
  • transform-style: Transfrom’un nasıl bir düzlemde yapılacağını belirtiyoruz. Burada preserve-3d ise child elementleri 3 boyutlu düzlemde hareket edecek demek.
  • backface-visibility: Bir elementin arka kısmının görünürlüğünü bu özellik ile belirtiyoruz. Biz hidden yani gizlenmiş olarak belirttik. 180 derece dönmüş halde gözükmemesini bu şekilde sağlıyoruz.

Aslında bu özellikleri bu kadar kısa bir şekilde anlatmak doğru değil, siz uzun uzadıya araştırabilirsiniz. Fakat en azından ne olduğunu bilmeniz adına yararlı olabileceğini düşündüm.

Javascript ile butona basılarak döndürme

Bu özellik için gerekli olan CSS kodumuzu aslında yukarıda belirtmiştik. Bize sadece kısa bir javascript kodu yazmak kalıyor. Nerede yazmıştık bu css kodunu diyenler için:

/* Burada .flipContainer.flipped .flip seçicisini de ekleyerek flipped classı eklenmiş bir container da da dönüş efekti yapmasını istedik. */
.flipContainer:hover .flip, .flipContainer.hover .flip, .flipContainer.flipped .flip {
	transform: rotateY(180deg);
}

CSS’e de baktıktan sonra artık bir satırlık javascript kodumuz kalıyor bunu istediğiniz elementin onclick eventine yazarak çalıştırabilirsiniz:

document.querySelector('.flipContainer').classList.toggle('flipped')

jQuery kullananlar için:

$( ".toggleButton" ).click(function() {
   $(".flipContainer").toggleClass("flipped");
});

 

Mobil uyumluluk için küçük bir ekleme

Mobil uyumluluk açısından baktığımızda hover olayı olmadığı için küçük bir değişiklik yapmamız gerekiyor. flipContainer classına sahip divimize ontouchstart="this.classList.toggle('hover');" kodunu eklediğimiz zaman artık dokumna olayına karşı da hover olayını tetikleyecek ve dönüş gerçekleşecek. HTML’in son hali:

<div class="flipContainer" ontouchstart="this.classList.toggle('hover');>
	<div class="flip">
		<div class="on">
			<!-- ön içerik burada olacak -->
		</div>
		<div class="arka">
			<!-- arka içerik burada olacak -->
		</div>
	</div>
</div>

Evet! Artık dönen bir dive sahibiz. Bundan sonrası sizin hayal gücünüze kalmış. Benden bu kadar. Umarım sizin için faydalı bir yazı olmuştur. Herkese iyi kodlamalar!