CSS cos() Function
Example
Use cos() to keep the size of a rotated box:
div.c {
width: calc(120px * cos(25deg));
height: calc(120px
* cos(25deg));
margin: calc(120px/4 * cos(25deg));
background-color: maroon;
transform: rotate(25deg);
transform-origin: center;
translate: -10px 10px;
}
Try it Yourself »
Definition and Usage
The CSS cos() function returns the
cosine of an angle.
The cosine of an angle will always return a number between -1 and 1.
| Version: | CSS4 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| cos() | 111 | 111 | 108 | 15.4 | 97 |
CSS Syntax
cos(angle)
| Value | Description |
|---|---|
| angle | Required. A calculation that resolves to a number or an angle |
Related Pages
CSS reference: CSS acos() function.
CSS reference: CSS asin() function.
CSS reference: CSS atan() function.
CSS reference: CSS atan2() function.
CSS reference: CSS calc() function.
CSS reference: CSS exp() function.
CSS reference: CSS hypot() function.
CSS reference: CSS log() function.
CSS reference: CSS mod() function.
CSS reference: CSS pow() function.
CSS reference: CSS sin() function.
CSS reference: CSS sqrt() function.
CSS reference: CSS tan() function.
