3D Marquee Demo

Step 1

perspective(視点距離)

「カメラからの距離」。 値が小さいほど近くから見ている感じになり、歪みが強くなる。

perspective1000px
React
Next.js
TypeScript
Tailwind
Step 2

rotateX / Y / Z(3軸回転)

3つの軸を使って3D空間で回転させる。

  • rotateX: 横軸を中心に回転(上下の傾き)
  • rotateY: 縦軸を中心に回転(左右の傾き)
  • rotateZ: 画面に垂直な軸で回転(時計回り)
rotateX45deg
rotateY15deg
rotateZ-40deg
React
Next.js
TypeScript
Tailwind
Step 3

マーキーアニメーション

無限ループのスクロールを実現。 偶数列は上方向、奇数列は下方向に動かすことで、立体感を演出。

React
Next.js
React
Next.js
React
Next.js
React
Next.js
Step 4

すべてを組み合わせる

perspective + 3D回転 + マーキーアニメーションを組み合わせると...

React
Next.js
TypeScript
Tailwind
React
Next.js
TypeScript
Tailwind
React
Next.js
TypeScript
Tailwind
React
Next.js
TypeScript
Tailwind