CSS ha evolucionado para incluir funciones trigonométricas: sin(), cos(), tan(), atan2(), asin(), acos(). Soportadas en Chrome 111+, Firefox 108+, Safari 15.4+.

Patrones de onda y oscilaciones

.wave { transform: translateY(calc(sin(var(--phase)) * 20px)); }

Crea efectos de onda puramente CSS. Combinado con @property para iterar ángulos.

Layouts circulares

Las fórmulas x = cx + r * cos(angle) y y = cy + r * sin(angle) permiten layouts circulares sin JavaScript. Power menús radiales, gráficos de donut, órbitas.

Curvas de animación

Funciones trigonométricas producen curvas de easing más allá de cubic-bezier. Decaimiento exponencial multiplicado por sin() produce animaciones de muelle naturales.

Diseño procedural con Custom Properties

Combinando trig functions con @property se genera diseño procedural: fondos, clip-paths y patrones que cambian con una semilla.

Usa @supports (sin(0)) para detección de funcionalidad. Respeta prefers-reduced-motion.