Sines and Cosines in Layout

Modern CSS allows using mathematical functions directly in property values. This opens path to complex trajectories.

• sin(), cos(), tan(): used for calculating coordinates.
• hypot(): calculates hypotenuse (distance).

Example: Circular Motion

.orbiting-ball {
  --angle: 45deg;
  /* Calculate position on circle */
  left: calc(50% + cos(var(--angle)) * 100px);
  top:  calc(50% + sin(var(--angle)) * 100px);
}