CSS sin() Function
Example
Use sin() within the calc() function to determine the width and height of three <div> elements:
div.a {
width: calc(sin(0.25turn) * 120px);
height: calc(sin(30deg)
* 120px);
background-color: salmon;
margin-bottom: 25px;
}
div.b {
width: calc(sin(90) * 120px);
height:
calc(sin(2*1.125) * 120px);
background-color: green;
margin-bottom: 25px;
}
div.c {
width: calc(sin(pi/2) *
120px);
height: calc(sin(pi/2) * 120px);
background-color:
maroon;
}
Try it Yourself »
Definition and Usage
The CSS sin() function returns the
sine of a number (angle).
The sine of an angle always returns a value between -1 and 1.
| Version: | CSS4 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| sin() | 111 | 111 | 108 | 15.4 | 97 |
CSS Syntax
sin(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 cos() 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.
