Bu makalemde, CSS ile 3 boyut özelliğine sahip sayfalar oluşturup, sayfalar arasındaki geçişleri 3 boyutlu olmasını sağlayacağız. Aslında yapacağımız işlemler oldukça basit. CSS "translateZ" komutu ile sayfaları plakalar şeklinde birbirinin önünde veya arkasında sıralayacağız ve sayfa geçişlerinde Z ekseni üzerinde taşıma işlemi yaparak güzel bir efekt de elde etmiş olacağız. Oluşturacağımız uygulamamızı aşağıda inceleyebilirsiniz.

   

Öncelikle HTML yapımızı oluşturmakla başlayalım. Yapımızda perspektif değerini ayarlamak ve hizalama kontrolü için "temel" isimli bir katman oluşturuyoruz. Sayfa geçişleri için 2 butonumuz, hangi sayfada olduğumuzu anlamak için (kullanıcıya gösterilmeyecek) bir input elemanımız mevcut. Elbetteki sayfalar için bir kaç katman da tanımlamamız gerekiyor. Beş adet sayfa, bu uygulama için herhalde yeterli olur.

 

<div id="temel">
	<button id="ileri">›</button>
	<button id="geri">‹</button>
	<input type="text" name="" id="kontrol" value="1" />
	<div id="sayfa1" class="sayfa"><h1>1/5</h1><p>yazılar</p></div>
	<div id="sayfa2" class="sayfa"><h1>2/5</h1><p>yazılar</p></div>
	<div id="sayfa3" class="sayfa"><h1>3/5</h1><p>yazılar</p></div>
	<div id="sayfa4" class="sayfa"><h1>4/5</h1><p>yazılar</p></div>
	<div id="sayfa5" class="sayfa"><h1>5/5</h1><p>yazılar</p></div>
</div>

 

CSS işlemlerimizi yapalım. Öncelikle bütün elemanlarımızı kapsayan "temel" isimli katmanımız ile perpektifi, yani görüntünün ekrandan olan uzaklığını ayarlamamız gerekiyor. Daha sonra sayfalarımızı bağımsızca hareket ettirmek için pozisyon değerlerini "absolute" yapıyoruz. Geri kalan CSS işlemleri ile çerçeve, hizalama, renk, font gibi ayarlamaları yapıyoruz.

 

#temel{
    perspective:3000px;
    width: 100%;
    height: 375px;
    border:5px solid #666;
}

.sayfa{
    transition:all 1s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow-y: scroll;
    background: #f8f8f8;
    font-family: "Arial";
    font-size: 15px;
}

.sayfa>h1{
    display: block;
    text-align: right;
}

#ileri, #geri{
    position: absolute;
    width: 50px;
    height: 50px;
    top:0;
    z-index: 99;
    text-align: center;
    font-family: "Arial";
    font-size: 30px;
    font-weight: bold;
    outline: none;
    border:4px solid #ccc;
}

#ileri{left: 60px;}
#geri{left:0px;}

#kontrol{
    position: absolute;
    top:-40px;
    display: none;
}

@media(max-width: 600px){#temel{width: 100%;height: 400px;}}

 

Bu uygulamamızda işleri kolaylaştırmak için CSS işlemlerini JQuery ile yapacağız. Eğer JQuery kullanmasaydık, her sayfa için bir HTML "label" elemanı ve her label elemanı için de HTML "input radio" elemanı eklememiz gerekir, kodlamamız uzardı. Ayrıca sayfaları hizalandırmada zorluk çekebilirdik. Bu yüzden CSS işlemlerini JQuery üzerinden kolaylıkla yapacağız.

 

JQuery kısmında, öncelikle bir fonksiyon oluşturalım. Bu fonksiyon ile hangi sayfadaysak ona göre CSS işlemleri yapılacak. 3 boyutlu bir efekt istediğimizden sayfalarımızı Z ekseni üzerinde taşıma işlemi yapacağız. Dilerseniz önce fonksiyonumuzu oluşturalım.

 

function degis(sayfa){
 if (sayfa=="1"){
    $("#sayfa1").css({"opacity":"1","transform":"translate3d(0,0,0)"});
    $("#sayfa2").css({"opacity":"0","transform":"translate3d(0,0,-3000px)"});
    $("#sayfa3").css({"opacity":"0","transform":"translate3d(0,0,-6000px)"});
    $("#sayfa4").css({"opacity":"0","transform":"translate3d(0,0,-9000px)"});
    $("#sayfa5").css({"opacity":"0","transform":"translate3d(0,0,-12000px)"});
 }

 if (sayfa=="2"){
    $("#sayfa1").css({"opacity":"0","transform":"translate3d(0,0,3000px)"});
    $("#sayfa2").css({"opacity":"1","transform":"translate3d(0,0,0px)"});
    $("#sayfa3").css({"opacity":"0","transform":"translate3d(0,0,-3000px)"});
    $("#sayfa4").css({"opacity":"0","transform":"translate3d(0,0,-6000px)"});
    $("#sayfa5").css({"opacity":"0","transform":"translate3d(0,0,-9000px)"});
 }

 if (sayfa=="3"){
    $("#sayfa1").css({"opacity":"0","transform":"translate3d(0,0,6000px)"});
    $("#sayfa2").css({"opacity":"0","transform":"translate3d(0,0,3000px)"});
    $("#sayfa3").css({"opacity":"1","transform":"translate3d(0,0,0px)"});
    $("#sayfa4").css({"opacity":"0","transform":"translate3d(0,0,-3000px)"});
    $("#sayfa5").css({"opacity":"0","transform":"translate3d(0,0,-6000px)"});
 }

 if (sayfa=="4"){
    $("#sayfa1").css({"opacity":"0","transform":"translate3d(0,0,9000px)"});
    $("#sayfa2").css({"opacity":"0","transform":"translate3d(0,0,6000px)"});
    $("#sayfa3").css({"opacity":"0","transform":"translate3d(0,0,3000px)"});
    $("#sayfa4").css({"opacity":"1","transform":"translate3d(0,0,0px)"});
    $("#sayfa5").css({"opacity":"0","transform":"translate3d(0,0,-3000px)"});
 }

 if (sayfa=="5"){
    $("#sayfa1").css({"opacity":"0","transform":"translate3d(0,0,12000px)"});
    $("#sayfa2").css({"opacity":"0","transform":"translate3d(0,0,9000px)"});
    $("#sayfa3").css({"opacity":"0","transform":"translate3d(0,0,6000px)"});
    $("#sayfa4").css({"opacity":"0","transform":"translate3d(0,0,3000px)"});
    $("#sayfa5").css({"opacity":"1","transform":"translate3d(0,0,0px)"});
 }
}

degis(1);

 

Öncelikle sayfa ilk açıldığında "degis(1);" komutu ile fonksiyonumuz 1. sayfa için çalışacak. Yani 1. sayfamızın Z ekseni üzerindeki değeri sıfır olacak. Fakat diğer sayfaların Z ekseni üzerindeki konumları aşama aşama 3000 piksel azaltılarak oluşturulacak. Böylece sayfaları plakalar şeklinde hizalayabileceğiz. Aiağıdaki resimde sayfa açılışındaki ilk ayarlamayı görebilirsiniz. İlk sayfa en önde olduğu için ve diğer sayfaların saydamlık (opacity) değerleri sıfır olduğu için, diğer sayfalar gözükmeyecek.

   

Kullanıcı ilk sayfadayken ileri butonuna basarsa, sayfaların Z ekseni üzerindeki değerleri 3000 piksel artırılacak. Böylece 1. sayfa ekranın dışına çıkacak ve 2. sayfa ekranda yer alacak. Sistemimiz böyle çalışacak.

   

Gelelim HTML ile eklediğimiz butonların davranışlarına : Kullanıcı butonlara tıkladığı zaman, HTML kısmında yapımıza eklediğimiz ve kullanıcıya göstermediğimiz input elemanındaki değer, tıklanan butona göre değişecek. Kullanıcı ileri butonuna tıkladıysa bu değer 1 artıralacak, geri butonuna tıkladıysa 1 azaltılacak. Bu sayede hangi sayfayı ekrana getirmemiz gerektiğini bileceğiz. Bir nevi uygulamanın haritası diyebiliriz. Elbetteki ilk ve son sayfalar için bazı kontrolleri yapmamız gerekiyor. Yani kullanıcı son sayfadaysa ve ileri butonuna basarsa input elemanımızın değeri değiştirilmeyecek. Şimdi gerekli komutlarımızı yazalım.

 

$("#ileri").on("click",function(){
 var kontrol = $("#kontrol").val();
 if (kontrol!=5){
  kontrol = parseInt(kontrol) + 1;
  $("#kontrol").val(kontrol);
 }
 degis(kontrol);
});

$("#geri").on("click",function(){
 var kontrol = $("#kontrol").val();
 if (kontrol!=1){
  kontrol = parseInt(kontrol) - 1;
  $("#kontrol").val(kontrol);
 }
 degis(kontrol)
});

 

Böylece kullanıcı ileri veya geri butonuna tıklarsa, input değeri, tıklanan butona göre değiştirilecek ve yazdığımız fonksiyon ile sayfalar için CSS işlemleri yapılacak. Bu işlemler daha önce de belirttiğim gibi, sayfaların Z ekseninde taşınmasını sağlayarak 3 boyutlu geçiş efektinin oluşmasını sağlayacak.

 

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 ulaşabilirsiniz.

 

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

  Uygulamamızı buraya tıklayarak bilgisayarınıza indirip, inceleyebilirsiniz.