Bu makalemde, CSS ile 3 boyutlu kitap tasarımı yapacağız. Hatırlarsanız serimizin ilk bölümünde CSS ile 3 boyutlu küp ve kutu tasarımları yapmıştık. Bu tasarımımızda 3 boyutlu bir dikdörtgenler prizması yaparak, yüzeylerine kitap resimleri ekleyeceğiz ve küçük detaylar ile kitap şekline getireceğiz. Küp tasarımında olduğu gibi sadece elemanlarımızı bazı eksenler etrafında taşıyıp, döndürerek 3 boyutlu yapımızı elde edeceğiz.

İlk olarak kitabımızın yüzeylerini oluşturacak resimlerimizin olması gerekiyor. Kendimce şöyle resimler hazırladım.

Tasarımımız sadece HTML ve CSS kısımlarından oluşacak. HTML için aşağıdaki gibi bir yapı oluşturmamız gerekmekte.

<div id="temel">
	<div id="kitap" class="kitap">
		<div id="on" class="kup"></div>
		<div id="arka" class="kup"></div>
		<div id="sag" class="kup"></div>
		<div id="sol" class="kup"></div>
		<div id="ust" class="kup"></div>
		<div id="alt" class="kup"></div>
	</div>
</div>

Dilerseniz CSS bassamaklarını bu uygulamamızda da adım adım oluşturalım.

Öncelikle oluşturacağımız kitabımızın hizalamasını kontrol edeceğimiz "temel" isimli katmanımız için şu CSS komutlarını yazalım.

#temel{
	position: relative;
	width: 100%;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

Daha sonra kitabı oluşturacak bütün yüzey elemanlarını kapsayan "kitap" isimli katmanımız için "değişim" (transform) özelliğinin 3 boyutlu olacağını CSS'e belirtelim. Aynı zamanda kitabın cep telefonu gibi küçük ekranlı cihazlarda da düzgün görüntülenmesini istediğimden, genişlik ve yükseklik değerlerini düşük tutuyorum. Elbettekiki isterseniz @media komutuyla görünümü bilgisayarlarda büyük, cep telefonlarında küçük hale getirebilirsiniz.

#kitap{
	width: 202px;
	height: 306px;
	transform-style:preserve-3d;
	transform-origin:center center;
}

Kitap yüzeylerini oluşturacak bütün elemanlarım "kup" isimli sınıfa sahip. Hepsi için gerekli ortak komutları yazalım.

.kup{
	position: absolute;
	left:0;
	top:0;
	border: 1px solid darkgreen;
        border-bottom: 1px solid darkkhaki;
        border-top: 1px solid darkkhaki;
}

Şimdi geldi yüzey elemanlarımız için CSS komutlarımıza. Burada dikkatinizi çekmek istediğim bir nokta var. Kitap için oluşturduğum resimlere bakarsanız sadece 3 resim görürsünüz, fakat kitabımız için 6 yüzey gerekli. Geri kalan 3 yüzeyi HTML ve CSS ile oluşturuyoruz. Bu yüzeyler kitabın yanlarında, kitap sayfalarının görünümünde olacak.

#on{
	width: 202px;
	height: 306px;
	background: url(images/yuzey1.jpg);
	background-size: 100% 100%;
}

#arka{
	width: 202px;
	height: 306px;
	background: url(images/yuzey2.jpg);
	background-size: 100% 100%;
}

#sag,#sol{
	width: 46px;
	height: 306px;
	background:khaki;
}

#sol{
	background:url(images/yuzey3.jpg);
	background-size: 100% 100%;
}

#sag{height: 300px;}

#ust,#alt{
	width: 193px;
	height: 46px;
	background:khaki;
}

Tasarımımız aşağıdaki şekle ulaştı.

Artık yapmamız gereken yüzeyleri eksenler etrafında döndürmek ve taşımak. Böylece bir önceki tasarımımız gibi 3 boyutlu bir yapı oluşturacağız. Ayrıca kitap görünümünün daha gerçekçi olması için, CSS ve HTML ile oluşturduğumuz kitap sayfalarını diğerler yüzeylere göre biraz daha içe taşıyacağız. Bunun yanında döndürme işlemimiz için bir animasyon komutunu da yapımıza ekliyoruz.

#sag{transform: rotateY(-270deg) translateZ(173px) translateY(4px);}
#sol{transform: rotateY(270deg) translateZ(22px);}
#on{transform: rotateY(0deg) translateZ(23px);}
#arka{transform: rotateY(180deg) translateZ(23px);}
#alt{transform: rotateX(90deg) translateZ(20px) translateX(3px);}
#ust{transform: rotateX(270deg) translateZ(280px)  translateX(3px);}
@keyframes don{to{transform:rotate3d(.1,1,.1,360deg);}}
#kitap{animation:don 12s infinite linear;}

3 Boyutlu küp ve kutu tasarladığımız serimizin ilk 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 indirebilirsiniz