depth

ساخت انیمیشن‌های عمقی، پارالاکس و رابط‌های سه‌بعدی با توکن‌های استاندارد

این Skill برای طراحی انیمیشن‌های مبتنی بر عمق و فضای سه‌بعدی در رابط کاربری است؛ از translateZ و perspective تا لایه‌های پارالاکس، کارت‌های سه‌بعدی و افکت عمق میدان.

با استفاده از توکن‌های آماده برای فاصله روی محور Z، پرسپکتیو و ترتیب لایه‌ها، می‌توانید موشن‌هایی منسجم‌تر و قابل نگه‌داری در CSS یا Framer Motion بسازید و برای prefers-reduced-motion نیز جایگزین مناسبی تعریف کنید.

چه چیزی می‌گیرید

توکن‌های استاندارد برای `z.near`، `z.medium`، `z.far` و لایه‌های عمق
راهنمای انتخاب مقدار مناسب `perspective` برای افکت‌های ظریف تا دراماتیک
الگوهای آماده برای hover سه‌بعدی، کارت flip و لایه‌های parallax
نمونه‌های پیاده‌سازی با CSS، JavaScript و Framer Motion
پیشنهادهای دسترس‌پذیری برای حالت `prefers-reduced-motion`

برای چه کاری خوب است

طراحی کارت‌ها و پنل‌های تعاملی با حس عمق و برجستگی
ساخت landing page یا scrollytelling با لایه‌های parallax
توسعه رابط‌هایی که به سلسله‌مراتب فضایی و نمایش سه‌بعدی نیاز دارند
تیم‌هایی که می‌خواهند مقادیر موشن را با Design Token مدیریت کنند

برای چه کاری نیست

انیمیشن‌های کاملاً دوبعدی که به عمق، پرسپکتیو یا لایه‌بندی فضایی نیاز ندارند
ساخت مدل‌ها یا صحنه‌های کامل سه‌بعدی با WebGL یا Three.js
پروژه‌هایی که باید بدون transform سه‌بعدی و parallax اجرا شوند

دربارهٔ این اسکیل

Depth

3D space and depth animations for layered interfaces.

Standards Reference

Standard	Documentation
W3C DTCG	designtokens.org
CSS Transform 3D	developer.mozilla.org/CSS/transform
CSS perspective	developer.mozilla.org/CSS/perspective

Quick Reference

Load from: tokens/depth.tokens.json

Z-Translation Values

Token	Value	Use
`z.near`	50px	Slightly forward
`z.medium`	100px	Moderate depth
`z.far`	200px	Distant layer
`z.background`	-100px	Behind plane

Perspective Values

Token	Value	Use
`perspective.subtle`	1000px	Subtle 3D
`perspective.medium`	600px	Moderate distortion
`perspective.dramatic`	300px	Strong 3D effect

Layer Depth

Token	Value	Use
`layer.background`	-3	Furthest back
`layer.mid`	0	Base layer
`layer.foreground`	3	Front elements

Selection Guide

What depth effect?
│
├── Z-AXIS MOVEMENT → translateZ
│   ├── Hover lift → z.near (50px)
│   ├── Card pop → z.medium (100px)
│   └── Full emerge → z.far (200px)
│
├── PERSPECTIVE CONTAINER
│   ├── Subtle 3D → perspective.subtle (1000px)
│   ├── Medium → perspective.medium (600px)
│   └── Dramatic → perspective.dramatic (300px)
│
├── PARALLAX LAYERS
│   ├── Background → layer.background (slowest)
│   ├── Mid → layer.mid (base speed)
│   └── Foreground → layer.foreground (fastest)
│
└── DEPTH OF FIELD
    ├── Focus → blur(0)
    ├── Near blur → blur(2px)
    └── Far blur → blur(5px)

Patterns

Z-Axis Hover

CSS:

.depth-container {
  perspective: 600px; /* {motion.depth.perspective.medium} */
}

.depth-card {
  transition: transform 300ms ease-out;
  transform-style: preserve-3d;
}

.depth-card:hover {
  transform: translateZ(100px); /* {motion.depth.z.medium} */
}

Framer Motion:

<motion.div
  style={{ perspective: 600 }}
>
  <motion.div
    whileHover={{ z: 100 }} // {motion.depth.z.medium}
    transition={{ duration: 0.3 }}
    style={{ transformStyle: 'preserve-3d' }}
  />
</motion.div>

Parallax Layers

CSS + JavaScript:

const layers = document.querySelectorAll('.parallax-layer');

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;

  layers.forEach((layer) => {
    const depth = parseFloat(layer.dataset.depth); // -3 to 3
    const movement = scrollY * (depth * 0.1);
    layer.style.transform = `translateY(${movement}px)`;
  });
});

Framer Motion:

import { useScroll, useTransform, motion } from 'framer-motion';

const ParallaxLayer = ({ depth, children }) => {
  const { scrollYProgress } = useScroll();

  // depth: -3 (background) to 3 (foreground)
  const y = useTransform(
    scrollYProgress,
    [0, 1],
    [0, depth * 100]
  );

  return <motion.div style={{ y }}>{children}</motion.div>;
};

3D Card Flip

CSS:

.flip-container {
  perspective: 600px;
}

.flip-card {
  transform-style: preserve-3d;
  transition: transform 600ms ease-out;
}

.flip-card.flipped {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  backface-visibility: hidden;
}

.flip-back {
  transform: rotateY(180deg);
}

Depth of Field

CSS:

.dof-container {
  perspective: 600px;
}

.layer-back {
  transform: translateZ(-100px); /* {motion.depth.z.background} */
  filter: blur(5px); /* Out of focus */
}

.layer-focus {
  transform: translateZ(0);
  filter: blur(0); /* In focus */
}

.layer-front {
  transform: translateZ(50px); /* {motion.depth.z.near} */
  filter: blur(2px); /* Slight blur */
}

Reduced Motion

For prefers-reduced-motion: reduce:

Full Motion	Reduced Alternative
Z-axis animation	Opacity or scale change
Parallax scroll	Fixed layers
3D perspective	Flat 2D fallback

Implementation:

@media (prefers-reduced-motion: reduce) {
  .depth-card:hover {
    transform: none;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  }

  .parallax-layer {
    transform: none !important;
  }
}

Cross-References

See 3d-transforms/ for full 3D rotations
See blur/ for depth-of-field effects
See camera/ for perspective movements
See parallax/ in scrollytelling skill
See compositing/ for layer blending

References

No additional references needed for this skill

دانلود ZIP