CSS types.sin() Function

The CSS sin() function is used to calculate the sine of an angle. The sine is a trigonometric function whose value ranges between -1 & 1. It is commonly used in mathematics and computer graphics to represent periodic behavior. In CSS, the sin() function can be used in calc() expressions to dynamically calculate values for properties such as position, size, and color.

Syntax:

/* angle values */
width: calc(100px * sin(30deg));
width: calc(100px * sin(0.15turn));
width: calc(100px * sin(1.0471967rad));

/* number values */
width: calc(100px * sin(90));
width: calc(100px * sin(2 * 5));

/* Other values */
width: calc(100px * sin(pi / 3));
width: calc(100px * sin(e / 5));

Parameter: The function takes a single parameter:

angle: The angle in degrees or radians that you want to calculate the sine of. In CSS, angles can be specified in either degrees (e.g. 45deg) or radians (e.g. 0.785398rad).

Return Value: The return value of the CSS sin() function is a dimensionless number that represents the sine of the specified angle. This value can be used in CSS calc() expressions to calculate values for properties such as width, height, and position. If the value of the angle lies between infinity & -infinity or NaN, then the result will be NaN. The result will be 0⁻ if the angle is 0⁻

Example 1: This example illustrates the Dynamic Width Based on Sine of an Angle.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <style> 

        .box { 

          height: 100px; 

          background-color: green; 

          position: absolute; 

          top: 50px; 

          left: 30%; 

          transform: translateX(-50%); 

          width: calc(100px * sin(30deg)); 

        } 

    </style> 

</head> 

<body> 

    <h1 style="color: green;"> 

          GeeksforGeeks 

      </h1> 

    <h2>sin() function</h2> 

    <div class="box"></div> 

</body> 

</html>

Output:

Example 2: This example illustrates the Dynamic Background Color Based on the Sine of Time.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <style> 

        .box { 

          width: 100px; 

          height: 100px; 

          position: absolute; 

          top: 25%; 

          left: 5%; 

          transform: translate(-50%, -50%); 

        } 

    </style> 

</head> 

<body> 

    <h1 style="color: green;"> 

        GeeksforGeeks 

    </h1> 

    <h2>sin() function</h2> 

    <div class="box" 

         id="box"> 

    </div> 

    <script> 

        setInterval(function() { 

          let time = new Date().getTime() / 1000; 

          let color = Math.floor(128 + 128 * Math.sin(time)); 

          document.getElementById("box").style.backgroundColor =  

            `rgb(${color}, ${color}, ${color})`; 

        }, 20); 

    </script> 

</body> 

</html>

Output:

Supported browsers: The browsers supported by the sin() function are listed below:

Firefox 16.0
Safari 15.4

Article Tags :

CSS

Web Technologies

CSS-Functions