CSS 函数

CSS 函数 acos() 是一个三角函数，用于计算 -1 和 1 范围内的值的反余弦。

此函数执行单个计算并返回表示的弧度数<angle> 介于 0 度和 180 度之间。

可能的值

acos(number) 函数仅允许单个值作为参数。

  • number - 计算返回 -1 到 1 范围内的 <number>。

返回值

的反余弦数字始终返回 0° 到 180° 范围内的 <angle>。

  • 如果数字小于 -1 或大于 1，则结果为NaN。

  • 如果数字恰好为 1，则结果为 0。

语法

acos( <calc-sum> )

CSS acos(): 旋转元素

acos() 函数可用于旋转元素，因为它会生成 <angle>。下面的例子演示了acos()的使用。

<html>
<head>
<style>
   div.box {
      width: 100px;
      height: 100px;
      background-color: lightgreen;
      text-align:center;
      font-size:30px;
   }
   div.boxA {
      transform: rotate(asin(1));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxB {
      transform: rotate(acos(0.5));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxC {
      transform: rotate(acos(0));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxD {
      transform: rotate(acos(-0.5));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxE {
      transform: rotate(acos(-1));
      margin-bottom: 20px;
      margin-left:20px;
   }
</style>
</head>
<body>
<div class="box boxA">A</div>
<div class="box boxB">B</div>
<div class="box boxC">C</div>
<div class="box boxD">D</div>
<div class="box boxE">E</div>
</body>
</html>