Adım adım bir web sayfasına 3D sanrısı ekleme işlemini aşağıda sırası ile anlatıyorum. En altta vereceğim kodu bir not defterine yapıştırıp bu not defterini .html uzantısı ile kaydedip tarayıcınızda açarsanız aşağıdaki kutuda gördüğünüz gibi farenize göre davranış değiştiren bir 3D küp çizmiş olacaksınız. Üstelik 200×200 pixellik resim eklenmiş haliyle sayfanızda oluşturacağı yük toplam yalnızca 48kb boyutunda.
HTML5 teknolojisinde çalışacağımız için aşağıdaki şekilde HTML5 deklarasyonu yapıyoruz.
<!DOCTYPE html><html>, <head> ve <title> parçacıklarını klasik html sayfalarında kullandığımız gibi kullanacağız.
<html>
<head>
<title>aydinoloji</title>
<style>Sayfanın stili içine çizeceğimiz küp modelinin CSS verilerini işlememiz gerekiyor:
<style>
#icerik { /*div elementlerinden "icerik" değişkenini atıyor ve özelliklerini belriliyorum.*/
width: 400px;
height: 350px;
perspective: 500px; /*3D anlamda uzak olan nesneleri perpektif ile küçültüyorum.*/
display: flex;
justify-content: center;
align-items: center;
}
#kup { /*div elementlerinden "küp" değişkenini atıyor ve özelliklerini belriliyorum.*/
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d; /*"transform" 3d sahada sabitlenmiş hareketi sağlar. küpün 3D dönme yeteneğini aktif ediyorum.*/
transition: transform 1s; /*dönüş hızını buradan ayarlayabilirsiniz.*/
display: flex; /*küpün yüzlerinin yan yana hizalanmasını sağlıyorum.*/
justify-content: center; /*çizeceğim şey her neyse onu ortaya hizalıyorum*/
align-items: center; /*çizeceğim şey her neyse onu ortaya hizalıyorum*/
}
#kup .face { /*küp elementinin içerdiği"face" yani yüz değerlerini tırnağı kapattıktan sonra seçeceğim*/
position: absolute;
width: 200px;
height: 200px;
border: 4px solid black; /*küp ayrıtlarını oluşturan çizgilerin kalınlıkları*/
box-sizing: border-box;
}
#kup .front img { /*yüzeyleri tek tek tanımlıyor ve tanımlarıma boyut ekliyor ve front haricinde kalanlara açı yazarak bulunması gereken konumu belirliyorum, front zaten 0 noktasında oluştuğu için "0deg" ya da "360deg" yazabilirim ancak bunun bir anlamı olmaz, diğerleri ise istediğim açıda olmalı. bir küp çizerken 90 ve katlarında açılar giriyorum. içerikteki "img" ile web sitemin logosunu küp içinde oluşturacağım*/
transform: translateZ(100px);
}
#kup .back {
transform: rotateY(180deg) translateZ(100px);
}
#kup .right {
transform: rotateY(90deg) translateZ(100px);
}
#kup .left {
transform: rotateY(-90deg) translateZ(100px);
}
#kup .top {
transform: rotateX(-90deg) translateZ(100px);
}
#kup .bottom {
transform: rotateX(90deg) translateZ(100px);
}
</style><body> yani gövde bölümünü açtıktan sonra altına arayüzün parçalarını yerleştiriyorum:
<div id="icerik">
<div id="kup">
<div class="face front"><img src="https://www.aydinoloji.com/wp-content/uploads/2023/05/LogoS-200.png" alt="Ön yüz"></div> /*küpün ön yüzeyinde yazmasını istediğim şey buraya yazılacak. mesela burada küp yüzeyinde oluşacak logomun adresini girdim*/
<div class="face back">Arka</div>
<div class="face right">Sağ</div>
<div class="face left">Sol</div>
<div class="face top">Alt</div> /*bu satırdan sonra bir hata meydana geldi ancak işlevi bozmadığı için değiştirmedim. "top" ifadesi yazılı olan yüzey altta oluştu, bunun neden kaynaklandığı ile ilgilenmiyorum kodlar çalışıyor*/
<div class="face bottom">Üst</div>
</div>
</div>Fareye göre konum belirleyip dönüşü sağlayan kodlar ise aşağıdaki şekilde:
<script>
var kup = document.getElementById("kup");
var icerik = document.getElementById("icerik");
var donusHizi = 1; /*her çerçevede kaç derecelik dönüş istediğimizi buradan ayarlayabiliriz*/
function kupcevir() { /*hesaplamalar*/
kup.style.transform += "rotateY(" + donusHizi + "deg)";
requestAnimationFrame(kupcevir);
}
requestAnimationFrame(kupcevir);/*kupcevir adını verdiğim fonksiyonu her framede çağırailiriz*/
icerik.addEventListener("mousemove", function(event) {
var x = event.clientX; /*fare konumunu x ve y olarak çekiyorum*/
var y = event.clientY;
var merkezX = icerik.offsetWidth / 2; /*küp konumunu x ve y olarak çekiyorum*/
var merkezY = icerik.offsetHeight / 2;
var degisimX = (x - merkezX) / merkezX; /*faremin küpe göre yer değişimini gösteren x ve y eksenlerine ait değişkenler*/
var degisimY = (y - merkezY) / merkezY;
kup.style.transform = "rotateX(" + (-degisimY * 20) + "deg) rotateY(" + (degisimX * 20) + "deg)"; /*istediğiniz hassasiyete göre ayarlayabileceğiniz dönüş matematiği*/
});
</script><body> ve <html> kapanışlarını yapıp aşağıdaki hale getiriyoruz.
Oldukça az kodla üç boyutlu gibi görünen objeyi hiçbir 3D tasarım yazılımı kullanmadan bu şekilde çizebilirsiniz. Aşağıda vereceğim kodu bir not defterine yapıştırıp bu not defterini .html uzantısı ile kaydedip tarayıcınızda açarsanız yukarıdaki kutuda gördüğünüz gibi farenize göre hareket eden bir 3D küp çizmiş olacaksınız.
<!DOCTYPE html>
<html>
<head>
<title>aydinoloji</title>
<style>
#icerik {
width: 400px;
height: 350px;
perspective: 500px;
display: flex;
justify-content: center;
align-items: center;
}
#kup {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
display: flex;
justify-content: center;
align-items: center;
}
#kup .face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid black;
box-sizing: border-box;
}
#kup .front img {
transform: translateZ(100px);
}
#kup .back {
transform: rotateY(180deg) translateZ(100px);
}
#kup .right {
transform: rotateY(90deg) translateZ(100px);
}
#kup .left {
transform: rotateY(-90deg) translateZ(100px);
}
#kup .top {
transform: rotateX(-90deg) translateZ(100px);
}
#kup .bottom {
transform: rotateX(90deg) translateZ(100px);
}
</style>
</head>
<body>
<div id="icerik">
<div id="kup">
<div class="face front"><img src="https://www.aydinoloji.com/wp-content/uploads/2023/05/LogoS-200.png" alt="Ön"></div>
<div class="face back">Arka</div>
<div class="face right">Sağ</div>
<div class="face left">Sol</div>
<div class="face top">Alt</div>
<div class="face bottom">Üst</div>
</div>
</div>
<script>
var kup = document.getElementById("kup");
var icerik = document.getElementById("icerik");
var donusHizi = 1; /*her çerçevede kaç derecelik dönüş istediğimizi buradan ayarlayabiliriz*/
function kupcevir() {
kup.style.transform += "rotateY(" + donusHizi + "deg)";
requestAnimationFrame(kupcevir);
}
requestAnimationFrame(kupcevir);
icerik.addEventListener("mousemove", function(event) {
var x = event.clientX;
var y = event.clientY;
var merkezX = icerik.offsetWidth / 2;
var merkezY = icerik.offsetHeight / 2;
var degisimX = (x - merkezX) / merkezX;
var degisimY = (y - merkezY) / merkezY;
kup.style.transform = "rotateX(" + (-degisimY * 20) + "deg) rotateY(" + (degisimX * 20) + "deg)";
});
</script>
</body>
</html>
Bir yanıt yazın