Cara membuat kubus berputar 3D pada gulir menggunakan trig.js – Beragampengetahuan

🚀 Buat kubus berputar 3D yang luar biasa yang dapat diputar pada gulir!

Anda ingin membuat Animasi gulir terasa luar biasatidak memiliki sejumlah besar perpustakaan JavaScript memperlambat situs web Anda? Jika saya memberi tahu Anda Anda dapat dengan mudah memutar kubus 3D pada gulir,menggunakan CSS dan trig.js?

Dalam posting ini saya akan menunjukkan cara menggunakannya position: sticky; Dan biarkan trig.js menangani rotasi berbasis gulir. hasil? satu Efek yang menarik Ketika kubus tetap di tempatnya, kubus berputar, memungkinkan latar belakang tetap bergulir!

🎥 Lihat Demonstrasi Codepen Real-Time

🛠 Apa yang kami bangun

Dan Hanya beberapa baris cs dan trig.jskami akan membuat:

✅A Kubus 3d Itu Stabilitas rotasi Saat Anda menggulir

✅A Interaksi menggulir Posisi kubus Tetap diperbaiki Saat halaman bergerak

✅A Solusi ringan Ini tidak memerlukan GSAP atau gulungan

Keajaiban trig.js

Kami mengaktifkan trig.js pada elemen induk dan menggunakan variabel CSS -nya (--trig) Tentang elemen anak -anak. Ini memungkinkan Apa pun Menggulir Oleh CSS.

<div class="pinContainer" data-trig data-trig-degrees="true" data-trig-min="-200" data-trig-max="200">
  <div class="cubeContainer">
      <div class="cube">
          <div class="cube-face front"><span>Front</span></div>
          <div class="cube-face back"><span>Back</span></div>
          <div class="cube-face left"><span>Left</span></div>
          <div class="cube-face right"><span>Right</span></div>
          <div class="cube-face top"><span>Top</span></div>
          <div class="cube-face bottom"><span>Bottom</span></div>
      </div>
  </div>
</div>

📌 gunakan position: sticky

ini Perbaiki kubus di tempatnya Saat Latar Belakang Gulir:

.cubeContainer {
  position: sticky;
  top: 30%;
}

🔄Tolle The Cube sambil menggulir

Menggunakan trig.js, kami berlaku Rotasi dinamis Melalui variabel CSS:

.cube {
  transform: rotateX(calc(var(--trig-deg) - 60deg)) rotateY(var(--trig-deg-reverse));
}

🧪Try sendiri!

Teknologi ini dapat digunakan untuk:

🎨 Bercerita interaktif Dengan elemen 3D

🖥 Halaman arahan Itu menarik perhatian

Apa yang akan Anda buat dengannya? 🤔

📢 Bergabunglah dengan Tantangan Trig.js!

Punya ide animasi yang keren? ada Tantangan Trig.jsKain wol

Untuk penelitian mendalam lebih lanjut Animasi gulirMemeriksa:

👉 CSS + JS Scroll Animation – Itulah mengapa

🔗 Sumber Daya

💡 Jika Anda mencobanya, silakan komentar di bawah ini! Mari kita membangun sesuatu yang hebat bersama! 🚀