CSS ile 3 Boyutlu Yapılar Oluşturma - 4
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.
- Yayın Süresi : 2636 Gün
- Konu Sayısı : 277 Bilim Konuları : 118 Teknoloji Konuları : 42 Web-Tasarım Konuları : 42 İlginçler Konuları : 63 Gezi Konuları : 12 En Popüler : Sonsuz İşlemleri 246123 Kere En Çok Yorum Alan : Logaritma Nedir, Ne İşe Yarar, Gerçek Hayatta Nerelerde Kullanılır? 19 Kere En Çok Değerlendirilen : Napier'in Kemikleri (Matematik) 151 Kere
Satrançta Piyonun Geçerken Alması Kuralı (En Passant)
En passant kuralı nedir, ne zaman uygulanır...
Işık Hızında Bağıl Hız
Işık hızında giden cisimler için bağıl hız hesaplamaları...
Newton Karantinada Neler Yaptı?
Newtonun karantina günleri ve icatları...
Çamaşır Suyu Nedir? Nasıl Temizler?
Çamaşır suyunun yapısı, kullanım alanları ve dikkat edilmesi gerekenler...
Dünyanın Yaşını Nasıl Biliyoruz?
Dünyanın yaşını hesaplama yöntemleri...
Salgın Hastalık Dereceleri : Pandemik, Epidemik, Endemik, Sporadik
Pandemik, Epidemik, Endemik, Sporadik Nedir?
Kahve Günlükleri : Kahve Çekirdeği Kavurma Dereceleri
Hafif, orta, orta-koyu, koyu kavrulmuş kahve çekirdeklerinin özellikleri ve farkları...
Kahve Günlükleri : Kahve Demleme Yöntemleri
Kahve demleme yöntemleri ve farkları...
Kahve Günlükleri : Kahve Çeşitleri ve Ölçüleri
Popüler kahve çeşitleri ve ölçüleri...
Kahve Günlükleri : Arabica ve Robusta
Arabica ve Robusta kahve çekirdekleri ve farkları...
Sayıların Sınıflandırılması (Matematik)
Matematikte sayıların sınıflandırılması : Kompleks, Sanal, Gerçek, Doğal, Rasyonel, İrrasyonel...
Websiteniz İçin Bedava Güvenlik Sertifikası (SSL Sertifikası)
Tamamen bedava güvenlik sertifikası nasıl elde edilir, nasıl yüklenir?
Wi-Fi Şifresini Görme (Windows 7 - 10)
Programsız, kodsuz wifi şifresini görme yöntemi.
Kolay Ezberleme Yöntemi : Anımsatıcılar
Kolay ezberleme yöntemlerinden anımsatıcılar : Mnemotekni
Tarayıcılarda Ön Bellek İşlemleri (Normal Yükleme - Tam Yükleme - Ön Belleği Boşaltma)
Tarayıcılarda normal yükleme ve tam yükleme ne demektir, nasıl yapılır?
Takip, Reaksiyon, Fren ve Durma Mesafesi
Reaksiyon, fren, durma ve takip mesafesi nasıl hesaplanır, bilimsel detaylar.
Bilgisayarda Müzik Nasıl Yapılır?
Sadece bilgisayar programları kullanarak gerçekçi müzik nasıl oluşturulur?
Beden Kitle İndeksi Hesaplama ve Değerlendirme
Bu uygulama ile Vücut Kitle İndeksinizi hesaplayabilir ve sonucu değerlendirebilirsiniz.
Hidrojen Peroksit (H2O2) ve Özellikleri
Hidrojen peroksit nedir, sağlık açısından ne gibi etkileri vardır?
Photoshop'ta Ortalama İşlemleri
Photoshop'ta ortalama işlemleri nasıl yapılır?
Bu kısımdan sitemizdeki gelişmelerden haberdar olabilirsiniz.
- Abonelik Sistemi kaldırıldı. 11.03.2020
- Arama Motoru Google Özel Arama olarak değiştirildi. 15.10.2019
- Yıllık sunucu bakımı tamamlandı. 04.10.2019
- Konulara kaynaklar eklendi. 10.07.2019
- SSL sertifikası eklendi. 31.05.2019
Gitar çalmayı öğrenmek, yeteneğinizi geliştirmek, popüler tab ve akorlar için gitaregitim.net sitesini ziyaret etmeyi unutmayın.