cos() CSS function
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
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 value, approximately 0.707.
Try it
transform: translateX(calc(cos(0deg) * 140px))
translateY(calc(sin(0deg) * -140px));
transform: translateX(calc(cos(90deg) * 140px))
translateY(calc(sin(90deg) * -140px));
transform: translateX(calc(cos(135deg) * 140px))
translateY(calc(sin(135deg) * -140px));
transform: translateX(calc(cos(180deg) * 140px))
translateY(calc(sin(180deg) * -140px));
transform: translateX(calc(cos(-45deg) * 140px))
translateY(calc(sin(-45deg) * -140px));
<div class="circle">
<span class="dot" id="example-element"></span>
</div>
:root {
--radius: 140px;
--dot-size: 10px;
}
.circle {
display: grid;
place-content: center;
margin: 0 auto;
width: calc(var(--radius) * 2);
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid #666666;
background-image:
radial-gradient(black var(--dot-size), transparent var(--dot-size)),
linear-gradient(135deg, blue, deepskyblue, lightgreen, lavender, honeydew);
}
.dot {
display: block;
width: var(--dot-size);
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid #666666;
background-color: #ff6666;
transform: translateX(calc(cos(0deg) * var(--radius)))
translateY(calc(sin(0deg) * var(--radius) * -1));
}
Syntax
/* Single <angle> values */
width: calc(100px * cos(45deg));
width: calc(100px * cos(0.125turn));
width: calc(100px * cos(0.785398163rad));
/* Single <number> values */
width: calc(100px * cos(63.673));
width: calc(100px * cos(2 * 0.125));
/* Other values */
width: calc(100px * cos(pi));
width: calc(100px * cos(e / 2));
Parameters
The cos(angle) function accepts only one value as its parameter.
Return value
The cosine of an angle will always return a number between −1 and 1.
- If
angleisinfinity,-infinity, orNaN, the result isNaN.
Formal syntax
<cos()> =
cos( <calc-sum> )
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
Examples
Keep the size of a rotated box
The cos() function can be used to keep the size of a rotated box.
When the element is rotated using rotate(), it goes beyond its initial size. To fix this, we will use cos() to update the element size.
For example, if you rotate a 100px/100px square 45deg, the diamond it creates will be wider and taller than the original square. To shrink the diamond into the box allotted for the original square, you would have to scale down the diamond using this formula: width = height = 100px * cos(45deg) = 100px * 0.707 = 70.7px. You need to also adjust the transform-origin and add translate() to correct the position:
HTML
<div class="original-square"></div>
<div class="rotated-diamond"></div>
<div class="rotated-scaled-diamond"></div>
CSS
div.original-square {
width: 100px;
height: 100px;
background-color: blue;
}
div.rotated-diamond {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}
div.rotated-scaled-diamond {
width: calc(100px * cos(45deg));
height: calc(100px * cos(45deg));
margin: calc(100px / 4 * cos(45deg));
transform: rotate(45deg);
transform-origin: center;
background-color: green;
}
Result
Specifications
| Specification |
|---|
| CSS Values and Units Module Level 4 # trig-funcs |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
cos()
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support