CSS 函数

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

此函数执行单个计算并返回代表 a 的弧度数。 <angle> 值介于 -90° 和 90° 之间。

可能的值

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

  • number - 计算结果为 -1 到 1 范围内的数字。

返回值

数字的反正弦值始终会导致 <angle> 在 -90deg 到 90deg 的范围内。

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

  • 如果数字为 0⁻，则结果为 0⁻。

语法

asin( <calc-sum> )

CSS asin(): 旋转元素

以下示例演示 asin() 函数的用法。

<html>
<head>
<style>
   div.box {
      width: 100px;
      height: 100px;
      background-color: gray;
      text-align:center;
      font-size:30px;
   }
   div.boxA {
      transform: rotate(asin(1));
      margin-bottom: 20px;
      margin-left:20px; 
   }
   div.boxB {
      transform: rotate(asin(0.5));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxC {
      transform: rotate(asin(0));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxD {
      transform: rotate(asin(-0.5));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxE {
      transform: rotate(asin(-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>