sin()
sin() CSS 函数是一个三角函数，它返回一个数字的正弦值，该值介于 -1 和 1 之间。该函数包含一个单一的计算，必须通过将参数结果解释为弧度来解析为 <number> 或 <angle>。也就是说，sin(45deg)、sin(0.125turn) 和 sin(3.14159 / 4) 都表示相同的值，大约为 0.707。
试一试
transform: translateX(calc(cos(0deg) * 140px))
translateY(calc(sin(0deg) * -140px));
transform: translateX(calc(cos(90deg) * 140px))
translateY(calc(sin(90deg) * -140px));
transform: translateX(calc(cos(135deg) * 140px))
translateY(calc(sin(135deg) * -140px));
transform: translateX(calc(cos(180deg) * 140px))
translateY(calc(sin(180deg) * -140px));
transform: translateX(calc(cos(-45deg) * 140px))
translateY(calc(sin(-45deg) * -140px));
<div class="circle">
<span class="dot" id="example-element"></span>
</div>
:root {
--radius: 140px;
--dot-size: 10px;
}
.circle {
display: grid;
place-content: center;
margin: 0 auto;
width: calc(var(--radius) * 2);
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid #666666;
background-image:
radial-gradient(black var(--dot-size), transparent var(--dot-size)),
linear-gradient(135deg, blue, deepskyblue, lightgreen, lavender, honeydew);
}
.dot {
display: block;
width: var(--dot-size);
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid #666666;
background-color: #ff6666;
transform: translateX(calc(cos(0deg) * var(--radius)))
translateY(calc(sin(0deg) * var(--radius) * -1));
}
语法
css
/* Single <angle> values */
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));
/* Single <number> values */
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));
/* Other values */
width: calc(100px * sin(pi / 2));
width: calc(100px * sin(e / 4));
参数
sin(angle) 函数只接受一个值作为其参数。
返回值
angle 的正弦值将始终返回一个介于 −1 和 1 之间的数字。
- 如果
angle是infinity、-infinity或NaN，则结果是NaN。 - 如果
angle是0⁻，则结果是0⁻。
正式语法
<sin()> =
sin( <calc-sum> )
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
示例
改变盒子大小
在此示例中，sin(30deg) 将返回 0.5，使盒子的宽度为 50px，高度为 50px。
css
div {
background-color: red;
width: calc(sin(30deg) * 100px);
height: calc(sin(30deg) * 100px);
}
控制动画持续时间
另一个用例是控制 animation-duration，根据正弦值缩短持续时间。在这种情况下，动画持续时间将为 1s。
css
div {
animation-name: myAnimation;
animation-duration: calc(sin(0.25turn) * 1s);
}
规范
| 规范 |
|---|
| CSS 值和单位模块第 4 级 # trig-funcs |
浏览器兼容性
加载中…