G95 · קובייה שמסתובבת פאה-פאה בגלילה

CSS

/* G95 · קובייה שמסתובבת פאה-פאה בגלילה */
.cb{position:relative;height:300vh}
.cb-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;perspective:1500px;overflow:hidden}
.cb-cube{position:relative;width:min(560px,80vw);aspect-ratio:16/10;transform-style:preserve-3d;will-change:transform}
.cb-face{position:absolute;inset:0;background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);border-radius:22px;padding:clamp(22px,4vw,44px);display:flex;flex-direction:column;justify-content:center;gap:12px;backface-visibility:hidden;box-shadow:0 30px 70px rgba(0,0,0,.12)}
.cb-face q{font-size:clamp(18px,2.4vw,30px);font-weight:600;line-height:1.35;quotes:none}
.cb-face cite{font-style:normal;color:var(--muted, #6a6d85);font-size:15px}
.cb-face b{font-size:12px;color:var(--accent, #4a3aff);letter-spacing:.14em}
.cb-dots{position:absolute;bottom:26px;display:flex;gap:8px}
.cb-dots i{width:8px;height:8px;border-radius:50%;background:var(--line, #e4e4ee)}
.cb-dots i.on{background:var(--accent, #4a3aff)}
@media(max-width:767px){.cb{height:240vh}.cb-cube{aspect-ratio:4/5}}

HTML

<div class="cb">
  <div class="cb-pin"><div class="cb-cube">
    <div class="cb-face"><b>01</b><q>האתר מסביר את העסק טוב יותר ממני.</q><cite>מיכל אדר, סטודיו לעיצוב פנים</cite></div>
    <div class="cb-face"><b>02</b><q>תוך שבועיים קיבלנו יותר פניות מחצי השנה שלפני.</q><cite>ד"ר נועה לוי, קליניקה</cite></div>
    <div class="cb-face"><b>03</b><q>הפעם הראשונה שמישהו שאל מה הלקוח צריך.</q><cite>רועי ברק, עורך דין</cite></div>
    <div class="cb-face"><b>04</b><q>המספרים שכנעו את השותף שלי.</q><cite>אייל כהן, חנות אונליין</cite></div>
  </div><div class="cb-dots"><i class="on"></i><i></i><i></i><i></i></div></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const cube=document.querySelector(".cb-cube"),faces=gsap.utils.toArray(".cb-face"),dots=gsap.utils.toArray(".cb-dots i");
  function place(){const d=cube.offsetWidth/2;faces.forEach((f,i)=>{f.style.transform="rotateY("+(i*90)+"deg) translateZ("+d+"px)";});gsap.set(cube,{z:-d});}   // סיבוב ואז הזזה: gsap.set היה מסדר הפוך והפאות היו מסתובבות במקום
  place();addEventListener("resize",place);
  if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;
  const tl=gsap.timeline({scrollTrigger:{trigger:".cb",start:"top top",end:"bottom bottom",scrub:.6,onUpdate(s){const k=Math.min(3,Math.round(s.progress*3));dots.forEach((d,i)=>d.classList.toggle("on",i===k));}}});
  // RTL: הפאה הבאה מגיעה משמאל, לכן הקובייה מסתובבת חיובית
  for(let i=1;i<4;i++)tl.to(cube,{rotateY:i*90,duration:1,ease:"power2.inOut"},i-1+.2);
})();