CSS Function - sin()

Quiz

The CSS function sin() is a trigonometric operation that calculates the sine of a given number and returns a result in the range -1 to 1.

This function performs a single calculation, interpreting the input as radians, and the output can be either a <number> or an <angle>.

Possible value

The sin(angle) function can take only a single value as a parameter.

angle - A calculation that yields either a <number> or an <angle>. When unitless numbers are used, they are interpreted as radians and represent an <angle>.

Return Value

The sine of any angle always gives a value in the range -1 to 1.

If the angle is infinity, -infinity, or NaN, the result is NaN.
If the angle is 0-, the result is 0-.

Syntax

sin( <calc-sum> )

CSS sin() - Basic Example

In the following example, the .sin-box div's width and height are calculated using the sin() inside the calc() function.

 
<html>
<head>
<style>
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200vh;
      margin: 0;
      font-size:20px;
   }
   .sin-box1 {
      width: calc(sin(30deg) * 100px);
      height: calc(sin(30deg) * 100px);
      background-color: lightblue;
      margin-right:10px;
   }
   .sin-box2 {
      width: calc(sin(60deg) * 100px);
      height: calc(sin(60deg) * 100px);
      background-color: lightgray;
      margin-right:10px;
   }
   .sin-box3 {
      width: calc(sin(90deg) * 100px);
      height: calc(sin(90deg) * 100px);
      background-color: lightgreen;
      margin-right:10px;
   }
</style>
</head>
<body>
   <div class="sin-box1">1</div>
   <div class="sin-box2">2</div>
   <div class="sin-box3">3</div>
</body>
</html>

Print Page