CSS Function - cos()

The CSS function cos() is a trigonometric operation that calculates the cosine 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 cos(angle) function accepts only a single value as its parameter.

  • angle - A calculation that yields either a <number> or an <angle>. When unitless numbers are used, they are to be understood as radians indicating one.

Return Value

The cosine of an angle always gives a value in the range -1 to 1.

  • If the angle is infinity, -infinity, or NaN, the result will be NaN.

Syntax

cos( <calc-sum> )

CSS cos() - Basic Example

In the following example, the cos() function is used within the calc() function to determine the width, height, and margin of the rotated-scaled-rectangle element.

 
<html>
<head>
<style>
   div.original-rectangle {
      width: 150px;
      height: 100px;
      background-color: orange;
      margin-bottom: 30px;
   }
   div.rotated-rectangle {
      width: 150px;
      height: 100px;
      background-color: yellow;
      transform: rotate(25deg);
   }
   div.rotated-scaled-rectangle {
      width: calc(120px * cos(25deg));
      height: calc(70px * cos(25deg));
      margin: calc(40px * cos(25deg));
      transform: rotate(25deg);
      transform-origin: center;
      background-color: pink;
   }
</style>
</head>
<body>
<div class="original-rectangle"></div>
<div class="rotated-rectangle"></div>
<div class="rotated-scaled-rectangle"></div>
</body>
</html>
Advertisements