sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS)

Overview

The sin(), cos(), tan(), asin(), acos(), atan(), and atan2() CSS functions compute various trigonometric functions.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`acos`	111	111	108	15.4	111	15.4
Other
`css.types.asin` The asin() CSS function is a trigonometric function that returns the inverse sine of a number between -1 and 1. The function contains a single calculation that returns an angle between -90deg and 90deg.	111	111	108	15.4	111	15.4
`css.types.atan` The atan() CSS function is a trigonometric function that returns the inverse tangent of a number between -∞ and +∞. The function contains a single calculation that returns an angle between -90deg and 90deg.	111	111	108	15.4	111	15.4
`css.types.atan2` The atan2() CSS function is a trigonometric function that returns the inverse tangent of two values between -infinity and infinity. The function accepts two arguments and returns an angle between -180deg and 180deg, without implying any specific unit such as radians.	111	111	108	15.4	111	15.4
`css.types.cos` The cos() CSS function is a trigonometric function that returns the cosine of a number, which is a value between -1 and 1. The function contains a single calculation that must resolve to either a <number> or an angle by interpreting the result of the argument as radians. That is, cos(45deg), cos(0.125turn), and cos(3.14159 / 4) all represent the same…	111	111	108	15.4	111	15.4
`css.types.sin` The sin() CSS function is a trigonometric function that returns the sine of a number, which is a value between -1 and 1. The function contains a single calculation that must resolve to either a <number> or an angle by interpreting the result of the argument as radians. That is, sin(45deg), sin(0.125turn), and sin(3.14159 / 4) all represent the same…	111	111	108	15.4	111	15.4
`css.types.tan` The tan() CSS function is a trigonometric function that returns the tangent of a number, which is a value between −infinity and infinity. The function contains a single calculation that must resolve to either a <number> or an angle by interpreting the result of the argument as radians.	111	111	108	15.4	111	15.4

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS

.circular-layout {
  --items: 8;
  --radius: 150px;
}

.circular-layout > * {
  --angle: calc(360deg / var(--items) * var(--i));
  position: absolute;
  left: calc(50% + var(--radius) * cos(var(--angle)));
  top: calc(50% + var(--radius) * sin(var(--angle)));
  transform: translate(-50%, -50%);
}

Live demo

Circleshapeplacement

Trigonometric functions (sin, cos, tan, etc.) Circleshapeplacement demo.

PreviewFullscreen

waveformpattern

Trigonometric functions (sin, cos, tan, etc.) waveformpattern demo.

PreviewFullscreen

Rotateangle

Trigonometric functions (sin, cos, tan, etc.) Rotateangle demo.

PreviewFullscreen

Use cases

Using sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS)
The sin(), cos(), tan(), asin(), acos(), atan(), and atan2() CSS functions compute various trigonometric functions.

Cautions

May not be supported in older browsers.

Overview

Browser support

Syntax

Live demo

Circleshapeplacement

waveformpattern

Rotateangle

Use cases

Using sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS)

Cautions

Accessibility

Related links