Presets

Trigonometric Function

Input Value

Output Property

Multiplier & Offset

Animation

Saved Configurations

Visual Preview

Angle: 45°sin(45°) = 0.7071Output: 70.71px

Function Graph

10-1180°360°

Generated Expression

translateY(calc(sin(45deg) * 100px + 0px))

Generated CSS

/* CSS Trigonometric Functions - Generated by Brix340 Tools */

/* Basic Usage */
.element {
  transform: translateY(calc(sin(45deg) * 100px + 0px));
}

/* Using CSS Custom Properties */
:root {
  --angle: 45deg;
  --amplitude: 100;
  --offset: 0;
}

.dynamic-element {
  --sin-value: sin(var(--angle));
  --cos-value: cos(var(--angle));
  transform: translateX(calc(var(--cos-value) * var(--amplitude) * 1px))
             translateY(calc(var(--sin-value) * var(--amplitude) * 1px));
}

/* Circular Motion Pattern */
@property --orbit-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes orbit {
  to { --orbit-angle: 360deg; }
}

.orbiting-element {
  --radius: 100px;
  animation: orbit 4s linear infinite;
  transform: translateX(calc(cos(var(--orbit-angle)) * var(--radius)))
             translateY(calc(sin(var(--orbit-angle)) * var(--radius)));
}

/* Wave Pattern for Multiple Elements */
.wave-container {
  display: flex;
  gap: 10px;
}

.wave-item {
  --delay: 0;
  --phase: calc(var(--delay) * 30deg);
  animation: wave 2s ease-in-out infinite;
  animation-delay: calc(var(--delay) * 0.1s);
}

.wave-item:nth-child(1) { --delay: 0; }
.wave-item:nth-child(2) { --delay: 1; }
.wave-item:nth-child(3) { --delay: 2; }
.wave-item:nth-child(4) { --delay: 3; }
.wave-item:nth-child(5) { --delay: 4; }

/* Fallback for Older Browsers */
.element {
  /* Pre-calculated fallback */
  transform: translateY(70.71px);
}

/* @supports Feature Detection */
@supports (transform: translateX(calc(sin(45deg) * 1px))) {
  .modern-trig {
    transform: translateY(calc(sin(45deg) * 100px + 0px));
  }
}

CSS Trigonometric Functions Reference

Available Functions

  • sin(angle) - Returns -1 to 1
  • cos(angle) - Returns -1 to 1
  • tan(angle) - Returns any number
  • asin(value) - Returns angle (-90° to 90°)
  • acos(value) - Returns angle (0° to 180°)
  • atan(value) - Returns angle (-90° to 90°)
  • atan2(y, x) - Returns angle from coordinates

Angle Units

/* All valid angle units */
sin(45deg)    /* Degrees */
sin(0.785rad) /* Radians */
sin(50grad)   /* Gradians */
sin(0.125turn) /* Turns */

/* Calculations work */
sin(calc(90deg / 2))

Common Patterns

/* Circular motion */
translateX(calc(cos(angle) * 100px))
translateY(calc(sin(angle) * 100px))

/* Wave effect */
translateY(calc(sin(angle) * 50px))

/* Pulsing */
scale(calc(sin(angle) * 0.2 + 1))

Browser Support

  • Chrome 111+
  • Firefox 108+
  • Safari 15.4+
  • Edge 111+

~90% global coverage (Dec 2024)

With @property

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes spin {
  to { --angle: 360deg; }
}

.element {
  animation: spin 2s linear infinite;
  transform: translateX(calc(cos(var(--angle)) * 100px));
}

Tips

  • sin/cos return unitless numbers (-1 to 1)
  • Multiply by desired magnitude (pixels, percent)
  • Use @property for animatable custom properties
  • atan2(y, x) is useful for directional calculations
  • Combine sin/cos for circular paths

Rate this tool