Token	Value	Use
`angle.subtle`	3deg	Barely visible
`angle.light`	5deg	Gentle italic
`angle.medium`	10deg	Noticeable
`angle.strong`	20deg	Dramatic
`angle.extreme`	35deg	Heavy distortion

Italic Simulation

Token	Value	Use
`italic.normal`	0deg	Upright
`italic.slight`	-5deg	Subtle emphasis
`italic.standard`	-12deg	Standard italic
`italic.heavy`	-18deg	Strong emphasis

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:

Full Motion	Reduced Alternative
Skew transition	Instant or no skew
Wobble animation	Static or disabled
Entrance skew	Simple fade

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

Standard	Documentation
W3C DTCG	designtokens.org
CSS Transform	developer.mozilla.org/CSS/transform
CSS skew()	developer.mozilla.org/CSS/transform-function/skew

skew

Skew

Standards Reference

Quick Reference

Skew Angles