CSS ile 3 boyutlu yapılar serimizin bu son makalesinde, 3 boyutlu resim galerisi oluşturacağız. Önceki CSS 3 boyut makalelerimde küpler, kutular, kitaplar ve 3 boyut özelliğine sahip sayfalar tasarlamıştık. Bu makalem de önceki uygulamalarımız gibi oldukça basit ve tamamen CSS ile oluşturulacak. Yine elemanlarımızı oluşturup eksenler üzerinde taşıma ve döndürme işlemleri yaparak istediğimiz yapıyı elde edeceğiz. Uygulamamızı aşağıda inceleyebilirsiniz.

Her zamanki gibi işe HTML yapımızı oluşturmakla başlayalım.

<div id="temel">
	<div id="dolap">
		<div id="resim1" class="resimler"></div>
		<div id="resim2" class="resimler"></div>
		<div id="resim3" class="resimler"></div>
		<div id="resim4" class="resimler"></div>
		<div id="resim5" class="resimler"></div>
		<div id="resim6" class="resimler"></div>
	</div>
</div>

Galerimizin hizalama kontrolü ve perspektif ayarı için "temel" isimli bir katman, animasyonumuzu uygulayacağımız ve geçiş (transform) özelliğini 3 boyutlu hale getireceğimiz "dolap" isimli bir katman oluşturuyoruz. Bunların yanında resimlerin olacağı katmanları da HTML yapımıza ekledik. Sıra geldi CSS ayarlarımıza. Dilerseniz her zamanki gibi aşama aşama ilerleyelim. İlk olarak 3 boyutlu elemanlarımızı kapsayan "dolap" isimli katmanımız için animasyon komutumuzu yazalım. Katmanımızı Y ekseninde döndüreceğiz.

@keyframes don{to{transform:rotate3d(0,1,0,360deg);}}

Resim elemanlarımızı kapsayan katmanlar için hizalama ve boyut ayarlarını yapalım.

#temel{
	width: 100%;
	height: 450px;
	border:2px solid #666;
	overflow:hidden;
	perspective: 1000px;
	perspective-origin: center top;
	display: flex;
	justify-content: center;
	align-items: center;

}

#dolap{
	position: relative;
	width: 600px;
	height: 450px;
	transform-style: preserve-3d;
	left:0;
	top:0;
	animation: don 35s infinite linear;
}

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

Resimler için ortak komutlarımız yazalım.

.resimler{
    width: 300px;
    height: 225px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    top: 40px;
    left: 146px;
    opacity: .9;
    border:5px solid #1fa67a;
    overflow:hidden;
    transition: all .3s ease;

}

.resimler:hover{
	filter: saturate(2);
	opacity: 1;
	border:5px solid green;
}

Geriye sadece resim elemanlarımız için resimleri belirleme ve eksenler etrafında döndürüp, taşıma işlemi kalıyor. Burada dikkatinizi çekmek istediğim nokta, resimlerin Z ekseni üzerindeki taşıma miktarlarını ve Y ekseni etrafındaki döndürme oranlarını hesaplamak. Döndürme oranları kolaylıkla hesaplanabilir. 6 resmimiz olduğu için 360 dereceyi 6'ya böldüğümüzde 60 dereceyi elde ederiz. Yani resimlerimizi 60'ar derece aralıklarla Y ekseninde döndereceğiz. Resimlerimizin döndürme oranlarını 0, 60, 120, 180, 240 ve 300 derece olarak ayarlayacağız. Resimlerimizin merkezden uzaklığını yani Z eksenindeki taşınma oranlarını ise küçük bir trigonometrik hesap ile bulmamız gerekiyor. 6 resmimiz olduğu için oluşan şeklimiz altıgen olacak. Her resmin genişliği 300 piksel. Resimlerimizin merkezden uzaklığını tanjant matematiksel fonksiyonu ile hesaplıyoruz. Her resmi elde ettiğimiz rakam ile Z ekseni üzerinde taşırsak kusursuz bir altıgen elde ederiz. Aksi takdirde birbirinden uzak veya iç içe geçmiş resimler oluşur. Elbetteki deneme yanılma ile de kusursuz bir altıgen oluşturabiliriz. Tamamen size kalmış. Aşağıdaki resimde hesaplamanın nasıl yapıldığı yer alıyor. Hesaplama sonrasında Z ekseni için taşıma miktarını 258 küsür piksel bulduk. Ben Z ekseni için düz hesap 260 piksellik bir taşıma yapacağım.

#resim1{
	background: url(images/1.jpg);
	transform: rotateY(0deg) translateZ(260px);
}

#resim2{
	background: url(images/2.jpg);
	transform: rotateY(60deg) translateZ(260px);
}
#resim3{
	background: url(images/3.jpg);
	transform: rotateY(120deg) translateZ(260px);
}
#resim4{
	background: url(images/4.jpg);
	transform: rotateY(180deg) translateZ(260px);
}
#resim5{
	background: url(images/5.jpg);
	transform: rotateY(240deg) translateZ(260px);
}
#resim6{
	background: url(images/6.jpg);
	transform: rotateY(300deg) translateZ(260px);
}

Son olarak "media" komutu ile uygulamamızın farklı ekranlarda da düzgün görüntülenmesini sağlayarak tasarımımızı sonlandıralım. Elde ettiğimiz tasarım kolaylıkla geliştirilebilir, linkler eklenerek resimlerin büyük halleri gösterilebilir.

@media(max-width: 600px){#dolap{width: 500px;}.resimler{left: 97px;}}
@media(max-width: 500px){#dolap{width: 400px;}.resimler{left: 48px;}}
@media(max-width: 400px){
    #temel{height: 300px;}
    #dolap{width: 300px;}
    .resimler{
        width: 200px;
        height: 150px;
        top:100px;
    }
}

ve böylece CSS 3 boyut serimizi tamamlamış olduk. Gördüğünüz gibi kolaylıkla 3 boyutlu yapılar oluşturabiliyoruz. Dikkat etmemiz gereken tek şey telefon gibi küçük boyutlu cihazlarda tasarımlarımızın düzgün gösterilmesi. Önceki makalelerime aşağıdaki linklerden ulaşabilirsiniz.

3 Boyutlu küp ve kutu tasarladığımız serimizin ilk bölümüne buradan

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.

Tasarımımızı buradan bilgisarınıza indirebilirsiniz.