3D Book Flip
/* 1. Tam Ekran ve SAF BEYAZ Arka Plan */
body {
margin: 0;
padding: 0;
background-color: #ffffff; /* İstenildiği gibi tamamen bembeyaz arka plan */
}
#gsf-stage {
position: relative !important;
width: 100vw !important;
height: 100vh !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
background-color: #ffffff !important; /* Arka plan rengi saf beyaz yapıldı */
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif !important;
}
/* 2. SADECE OKLARDAN OLUŞAN ÖZEL İMLEÇ */
.gsf-click-zone {
position: absolute !important;
top: 0 !important;
width: 50% !important;
height: 100% !important;
z-index: 999998 !important;
background: transparent !important;
-webkit-tap-highlight-color: transparent !important;
}
#gsf-zone-left {
left: 0 !important;
cursor: url(‘data:image/svg+xml;utf8,←’) 20 20, w-resize !important;
}
#gsf-zone-right {
right: 0 !important;
cursor: url(‘data:image/svg+xml;utf8,→’) 20 20, e-resize !important;
}
/* Sayfa Numarası */
#gsf-pagination {
position: absolute !important;
bottom: 40px !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 4px !important;
color: #888 !important;
z-index: 999999 !important;
pointer-events: none !important;
}
/* 3. Kitap Konumu */
#gsf-book-wrap {
position: relative !important;
width: 45vh !important;
height: 70vh !important;
perspective: 4000px !important;
transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* YENİ: Ortadaki Sabit İnce Beyaz Çizgi (Hataları Örter) */
#gsf-center-line {
position: absolute !important;
top: 0 !important;
left: -1px !important; /* Hinge eksenine tam oturması için */
width: 2px !important;
height: 100% !important;
background-color: #ffffff !important;
transform: translateZ(15px) !important; /* 3D düzlemde diğer yüzeylerin üstünde kalması için öne alındı */
z-index: 9999 !important;
pointer-events: none !important; /* Tıklanmayı engellemez */
}
/* Zemin Mockup Gölgesi */
#gsf-mockup-shadow {
position: absolute !important;
top: 2% !important;
height: 96% !important;
background: transparent !important;
box-shadow: 0 40px 80px rgba(0,0,0,0.25), 0 10px 25px rgba(0,0,0,0.1) !important;
border-radius: 5px !important;
transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
z-index: -1 !important;
pointer-events: none !important;
}
/* 4. Sayfalar (3D Kapsayıcı) */
.gsf-page {
position: absolute !important;
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
transform-origin: left center !important;
transform-style: preserve-3d !important;
-webkit-transform-style: preserve-3d !important;
transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
pointer-events: none !important;
}
/* 5. Sayfa Yüzeyleri (Safari Beyaz Patlama Sorunu Çözümü) */
.gsf-face {
position: absolute !important;
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
background-color: #fff !important;
/* 3D rendering hatalarını önlemek için görünmez arka yüz eklendi */
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02) !important;
}
.gsf-front { transform: translateZ(5px) !important; }
.gsf-back { transform: rotateY(180deg) translateZ(5px) !important; }
/* Sağ Yan Duvar Kalınlığı */
.gsf-edge {
position: absolute !important;
width: 10px !important;
height: 100% !important;
top: 0 !important;
right: -5px !important;
background-color: #e6e6e6 !important;
transform: rotateY(90deg) !important;
border-left: 1px solid #d4d4d4 !important;
border-right: 1px solid #d4d4d4 !important;
}
/* YENİ: Sol Cilt Duvarı Kalınlığı (İçi Boş Kutu Görüntüsünü Engeller) */
.gsf-spine-edge {
position: absolute !important;
width: 10px !important;
height: 100% !important;
top: 0 !important;
left: -5px !important;
background-color: #cfcfcf !important;
transform: rotateY(-90deg) !important;
border-right: 1px solid #bbb !important;
}
/* Ön Kapak Çizgisi (Hardcover Hinge) */
#gsf-cover-hinge {
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 12px !important;
width: 6px !important;
background: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(255,255,255,0.2) 30%, rgba(0,0,0,0.3) 100%) !important;
z-index: 20 !important;
pointer-events: none !important;
mix-blend-mode: multiply !important;
}
/* Sayfa İçi Eğrilik/Bombe Gölgeleri */
.gsf-front::after {
content: ” !important;
position: absolute !important;
top: 0 !important; left: 0 !important;
width: 100% !important; height: 100% !important;
background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 8%, rgba(255,255,255,0.15) 20%, transparent 50%, rgba(0,0,0,0.03) 90%, rgba(0,0,0,0.1) 100%) !important;
pointer-events: none !important;
z-index: 10 !important;
}
.gsf-back::after {
content: ” !important;
position: absolute !important;
top: 0 !important; right: 0 !important;
width: 100% !important; height: 100% !important;
background: linear-gradient(to left, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 8%, rgba(255,255,255,0.15) 20%, transparent 50%, rgba(0,0,0,0.03) 90%, rgba(0,0,0,0.1) 100%) !important;
pointer-events: none !important;
z-index: 10 !important;
}
#gsf-page-1 .gsf-front::after { background: linear-gradient(to right, rgba(255,255,255,0.3) 0%, transparent 10%) !important; }
#gsf-page-6 .gsf-back::after { background: none !important; }
/* Fotoğraflar */
.gsf-img {
position: absolute !important;
top: 0 !important; left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* Mobil */
@media (max-width: 900px) {
#gsf-book-wrap { width: 45vw !important; height: calc(45vw * 1.33) !important; }
}
@media (max-width: 600px) {
#gsf-book-wrap { width: 48vw !important; height: calc(48vw * 1.33) !important; }
}
(function() {
window.gsfCurrent = 0;
window.gsfTotal = 6;
window.gsfIsAnimating = false;
window.gsfSyncBook = function() {
var bookWrap = document.getElementById(“gsf-book-wrap”);
var pagination = document.getElementById(“gsf-pagination”);
var mockupShadow = document.getElementById(“gsf-mockup-shadow”);
if (window.gsfCurrent === 0) {
bookWrap.style.transform = “translateX(0%)”;
mockupShadow.style.left = “0%”;
mockupShadow.style.width = “100%”;
} else if (window.gsfCurrent === window.gsfTotal) {
bookWrap.style.transform = “translateX(100%)”;
mockupShadow.style.left = “-100%”;
mockupShadow.style.width = “100%”;
} else {
bookWrap.style.transform = “translateX(50%)”;
mockupShadow.style.left = “-100%”;
mockupShadow.style.width = “200%”;
}
var currentStr = (window.gsfCurrent + 1 < 10) ? "0" + (window.gsfCurrent + 1) : (window.gsfCurrent + 1);
var totalStr = (window.gsfTotal + 1 = window.gsfTotal) return;
window.gsfIsAnimating = true;
var page = document.getElementById(“gsf-page-” + (window.gsfCurrent + 1));
page.style.zIndex = 100;
page.style.transform = “rotateY(-180deg)”;
window.gsfCurrent++;
window.gsfSyncBook();
setTimeout(function() {
page.style.zIndex = window.gsfCurrent;
window.gsfIsAnimating = false;
}, 1500);
};
window.gsfTurnPrev = function() {
if (window.gsfIsAnimating || window.gsfCurrent <= 0) return;
window.gsfIsAnimating = true;
var page = document.getElementById("gsf-page-" + window.gsfCurrent);
page.style.zIndex = 100;
page.style.transform = "rotateY(0deg)";
window.gsfCurrent–;
window.gsfSyncBook();
setTimeout(function() {
page.style.zIndex = window.gsfTotal – window.gsfCurrent;
window.gsfIsAnimating = false;
}, 1500);
};
document.addEventListener("keydown", function(e) {
if (e.key === "ArrowRight") window.gsfTurnNext();
else if (e.key === "ArrowLeft") window.gsfTurnPrev();
});
document.addEventListener("DOMContentLoaded", function() {
for (var i = 1; i <= window.gsfTotal; i++) {
var p = document.getElementById("gsf-page-" + i);
if (p) p.style.zIndex = window.gsfTotal – i + 1;
}
window.gsfSyncBook();
});
setTimeout(function(){
for (var i = 1; i <= window.gsfTotal; i++) {
var p = document.getElementById("gsf-page-" + i);
if(p) p.style.zIndex = window.gsfTotal – i + 1;
}
window.gsfSyncBook();
}, 300);
})();
Faruk Keskin... 