CSS Data Type - <angle-percentage>

CSS <angle-percentage> data type represents a fraction of a <angle> value.

When you use <angle-percentage> as an allowable type, the specified percentage can be converted into an angle and used in a calc() expression.

Possible Values

  • <angle> − It represents an angle measured in degrees, gradians, radians, or turns.

  • <percentage> − It represents percentage value between 0% to 100%.

Syntax

<angle-percentage> = <angle> | <percentage>;

CSS <angle-percentage> - Example

The following example demonstrates the use of transform: rotate(calc(45deg)) property that rotates the box by 45deg −

<html>
<head>
<style>
   div { 
      height: 100px;
      width: 100px;
      border: 2px solid blue;
      margin: 20px;
      transform: rotate(calc(45deg));
   }
</style>
</head>
<body>
   <div>
      The box rotates by 45deg.
   </div>
</body>
</html>
Advertisements