skew

ساخت افکت‌های شیب‌دار، ایتالیک، لرزش و Tilt برای رابط‌های کاربری پویا

این Skill برای طراحی و پیاده‌سازی انیمیشن‌های skew در CSS، Framer Motion و GSAP استفاده می‌شود؛ از شیب ملایم متن و شبیه‌سازی ایتالیک تا Tilt کارت، اعوجاج پرسپکتیو و افکت wobble.

توکن‌های استاندارد برای زاویه، جهت، مدت و دامنه‌ی حرکت ارائه می‌کند و الگوهای آماده برای تعاملات Hover، ورود عناصر و پشتیبانی از prefers-reduced-motion دارد.

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

• انتخاب توکن مناسب برای زاویه‌های subtle تا extreme
• الگوهای CSS برای شیب متن، Hover، ورود عناصر و wobble
• نمونه‌های آماده برای Framer Motion و GSAP
• پیاده‌سازی Tilt تعاملی کارت با حرکت ماوس
• راهنمای کاهش یا حذف حرکت برای دسترس‌پذیری

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

• طراحان و توسعه‌دهندگان UI که به تأکید بصری پویا برای متن و کارت‌ها نیاز دارند
• پروژه‌های React، Framer Motion یا GSAP با تعاملات Hover و Tilt
• ساخت رابط‌هایی با حس پرسپکتیو، اعوجاج کنترل‌شده یا حرکت wobble

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

• انیمیشن‌های پیچیده‌ی سه‌بعدی که به کنترل کامل perspective و محورهای فضایی نیاز دارند
• پروژه‌هایی که ظاهر کاملاً ثابت یا بدون حرکت را الزامی می‌کنند
• چیدمان‌های متنی حساس که هرگونه تغییر هندسی در آن‌ها باعث کاهش خوانایی می‌شود

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

Skew

Skew transform animations for slant and distortion effects.

Standards Reference

Quick Reference

Load from: tokens/skew.tokens.json

Skew Angles

Italic Simulation

Selection Guide

What skew effect?
│
├── STATIC SLANT → Fixed angle
│   ├── Subtle → angle.subtle (3deg)
│   ├── Medium → angle.medium (10deg)
│   └── Strong → angle.strong (20deg)
│
├── TEXT ITALIC → Horizontal skew
│   ├── Slight emphasis → italic.slight (-5deg)
│   ├── Standard → italic.standard (-12deg)
│   └── Heavy → italic.heavy (-18deg)
│
├── CARD TILT → Combined skew
│   ├── Hover effect → ±5deg both axes
│   └── Perspective → skewY for depth
│
└── WOBBLE → Oscillating skew
    ├── Subtle → amplitude-subtle (2deg)
    ├── Medium → amplitude-medium (5deg)
    └── Strong → amplitude-strong (10deg)

Patterns

Basic Skew Transition

CSS:

.skew-hover {
  transition: transform 300ms ease-out; /* {motion.skew.duration.standard} */
}

.skew-hover:hover {
  transform: skewX(10deg); /* {motion.skew.angle.medium} */
}

/* Skew both axes */
.skew-diagonal:hover {
  transform: skew(5deg, 5deg); /* {motion.skew.angle.light} */
}

Framer Motion:

<motion.div
  whileHover={{ skewX: 10 }} // {motion.skew.angle.medium}
  transition={{ duration: 0.3 }} // {motion.skew.duration.standard}
/>

Italic Text Animation

CSS:

.italic-emphasis {
  display: inline-block;
  transition: transform 200ms ease-out;
}

.italic-emphasis:hover {
  transform: skewX(-12deg); /* {motion.skew.italic.standard} */
}

/* Animate to italic on focus */
.input-italic:focus {
  transform: skewX(-5deg); /* {motion.skew.italic.slight} */
}

Framer Motion:

const ItalicText = ({ children, emphasize }) => (
  <motion.span
    animate={{ skewX: emphasize ? -12 : 0 }} // {motion.skew.italic.standard}
    transition={{ duration: 0.2 }}
    style={{ display: 'inline-block' }}
  >
    {children}
  </motion.span>
);

Skew Wobble

CSS:

@keyframes skewWobble {
  0%, 100% { transform: skewX(-5deg); }
  50% { transform: skewX(5deg); }
}

.wobble {
  animation: skewWobble 1s ease-in-out infinite;
  /* {motion.skew.oscillation.period-medium} */
}

/* Subtle wobble */
@keyframes subtleWobble {
  0%, 100% { transform: skewX(-2deg); } /* {motion.skew.oscillation.amplitude-subtle} */
  50% { transform: skewX(2deg); }
}

.wobble-subtle {
  animation: subtleWobble 2s ease-in-out infinite;
}

GSAP:

gsap.to(element, {
  skewX: 5, // {motion.skew.oscillation.amplitude-medium}
  duration: 0.5,
  yoyo: true,
  repeat: -1,
  ease: "sine.inOut"
});

Card Tilt Effect

Framer Motion:

const TiltCard = ({ children }) => {
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  const skewX = useTransform(x, [-100, 100], [5, -5]);
  const skewY = useTransform(y, [-100, 100], [-5, 5]);

  const handleMouseMove = (e: React.MouseEvent) => {
    const rect = e.currentTarget.getBoundingClientRect();
    x.set(e.clientX - rect.left - rect.width / 2);
    y.set(e.clientY - rect.top - rect.height / 2);
  };

  const handleMouseLeave = () => {
    x.set(0);
    y.set(0);
  };

  return (
    <motion.div
      style={{ skewX, skewY }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      transition={{ type: 'spring', stiffness: 300, damping: 20 }}
    >
      {children}
    </motion.div>
  );
};

Entrance with Skew

CSS:

@keyframes skewSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50px) skewX(20deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) skewX(0);
  }
}

.skew-entrance {
  animation: skewSlideIn 500ms ease-out forwards;
}

Framer Motion:

const SkewEntrance = ({ children }) => (
  <motion.div
    initial={{ opacity: 0, x: -50, skewX: 20 }}
    animate={{ opacity: 1, x: 0, skewX: 0 }}
    transition={{
      duration: 0.5,
      ease: [0.2, 0, 0, 1]
    }}
  >
    {children}
  </motion.div>
);

Reduced Motion

For prefers-reduced-motion: reduce:

Implementation:

@media (prefers-reduced-motion: reduce) {
  .skew-hover,
  .italic-emphasis {
    transition: none;
    transform: none;
  }

  .wobble,
  .wobble-subtle {
    animation: none;
  }

  .skew-entrance {
    animation: fadeIn 0.2s ease-out forwards;
  }
}

Cross-References

• See rotation/ for rotation transforms
• See scale/ for combined transform effects
• See 3d-transforms/ for perspective skewing
• See typography/ for text animation patterns

References

• No additional references needed for this skill

دانلود ZIP