Her ne kadar CSS kolay bir yapı olsa da zaman zaman yaptığı büyük işler bizleri şaşırtmaya devam ediyor. Bu makalemde CSS ile bir küp tasarlayarak, 3 boyutlu yapıların nasıl oluşturulacağını açıklamaya çalışacağım. Böylece websitemiz için 3 boyutlu resim galerileri, sayfa geçişleri, menü sistemleri gibi pek çok uygulamayı rahatlıkla yapabilir ve sayfamızın görünüşünü daha etkili bir hale getirebiliriz. Öncelikle CSS ile tasarlayacağımız küpü aşağıda inceleyebilirsiniz.

Tasarımımız iki aşamadan oluşuyor, HTML ve CSS. Öncelikle HTML yapımızı oluşturalım.

<div id="temel">
	<div id="kup">
		<div id="on" class="yuzey"><h1>Ön</h1></div>
		<div id="arka" class="yuzey"><h1>Arka</h1></div>
		<div id="ust" class="yuzey"><h1>Üst</h1></div>
		<div id="alt" class="yuzey"><h1>Alt</h1></div>
		<div id="sag" class="yuzey"><h1>Sağ</h1></div>
		<div id="sol" class="yuzey"><h1>Sol</h1></div>
	</div>
</div>

Bildiğiniz gibi küp 6 yüzeyden oluşur. Bu yüzden küpümüz için 6 tane "yuzey" isimli sınıflar tanımladık. Her sınıf için farklı CSS işlemleri yapacağımızdan yüzeyler için ayrıca kimlikler (id) belirledik. Sıra geldi CSS işlemlerine. Daha kolay anlaşılması açısından dilerseniz aşama aşama ilerleyelim.

Öncelikle elde edeceğimiz küpün her eksende dönmesi için bir animasyon hazırlayalım. Animasyonun adı da "don" olsun.

@keyframes don {
	from { transform: rotateY(0) rotateX(0) rotateZ(0);
	 }
	to { transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
	 }
}

Küp elemanlarını kapsayan temel isimli katmanımıza perspektif özelliğini ekliyoruz. CSS "perspective" komutu elemanımızın ekrandan ne kadar uzaklıkta olduğunu belirler.

#temel{
	perspective: 600px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow:hidden;
}

Yüzey elemanlarını kapsayan "kup" isimli katmanımıza ise, 3 boyutlu bir değişimin olacağını (transform) "transform-style:preserve-3d;" komutuyla belirtmemiz gerekiyor. Ayrıca bu elemanın üstüne gelindiğinde çalışan animasyonun duraksatılmasını da yazalım.

#kup{
	position: relative;
	width: 120px;
	height: 120px;
	transform-style:preserve-3d;
	margin:100px auto;
	animation: don 5s infinite linear;
}

#kup:hover{
	animation-play-state:paused;
}

Küp yüzeylerinin kontrolü ve hizalamalar için gerekli CSS kodlamasını yapalım.

.yuzey{

	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

Son olarak küp yüzeyini oluşturan elemanlarımızı 3 boyutlu şekilde sıralamamız gerekiyor. Bu işlemler için elemanları bazı eksenler etrafında döndürüp, eksenler üzerinde hareket ettirmemiz gerekiyor. Bunun için "transform" ve "rotate" komutlarını kullanacağız. Ayrıca elemanlarımızın küpün hangi yüzeyini oluşturacağı, "transform-origin" özelliğini değiştirecek. Dikkat etmemiz gereken bir nokta da eksenler üzerindeki taşıma işlemleri yani "translate" komutunun büyüklüğü. Bu büyüklük yüzey elemanlarını kapsayan elemanın büyüklüğünün yarısı kadar olmalı. Örneğimizde yüzey elemanlarını kapsayan "kup" katmanımızın genişliği ve yüksekliği 120 piksel. Bu yüzden yüzey elemanlarının taşıma işlemleri 60 piksel olmalı. Örneğin sağ yüzeyi oluşturacak elemanımızı, Y ekseninde döndürerek ve X ekseninde sağ tarafa 60 piksel taşıyarak oluşturuyoruz. Diğer elemanlarımızı da bulundukları yerlere göre farklı eksenler kullanarak konumlandırıyoruz.

#sag{
	transform: rotateY(-270deg) translateX(60px);
	transform-origin: top right;
	background: crimson;
	opacity: .8;
}

#sol {
	transform: rotateY(270deg) translateX(-60px);
	transform-origin: center left;
	background: lime;
	opacity: .8;
}

#on{
	transform: translateZ(60px);
	background: lightblue;
	opacity: .8;
}

#arka{
	transform: translateZ(-60px) rotateY(180deg);
	background: orange;
	opacity: .8;
}

#alt{
	transform: rotateX(90deg) translateY(60px);
	transform-origin: bottom center;
	background: pink;
	opacity: .8;
}

#ust{
	transform: rotateX(-90deg) translateY(-60px);
	transform-origin: top center;
	background: violet;
	opacity: .8;
}

Böylece küp uygulamamız hazır hale geliyor. Gördüğünüz gibi oldukça kolay bir yapı. Yüzeylere resimler, sayfalar ekleyerek farklı uygulamalar elde edebilirsiniz. Serimizin diğer bölümlerinde CSS ile 3 boyutlu farklı yapılar tasarlamaya devam edeceğiz. Yüzeylere resim ekleyerek aşağıdaki kutuyu rahatlıkla elde edebildik.

3 Boyutlu kitap tasarladığımız serimizin ikinci bölümüne buradan

3 Boyutlu sayfalar tasarladığımız serimizin üçüncü bölümüne buradan ulaşabilirsiniz.

3 Boyutlu resim galerisi tasarladığımız serimizin dördüncü bölümüne buradan ulaşabilirsiniz.

Tasarımımızı buradan bilgisayarınıza indirip, inceleyebilirsiniz.