acos()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.

Hàm acos() trong CSS là một hàm lượng giác trả về arccos (cosin nghịch đảo) của một số từ -1 đến 1. Hàm này chứa một phép tính duy nhất trả về một <angle> từ 0deg đến 180deg.

Cú pháp

css

/* Single <number> values */
transform: rotate(acos(-0.2));
transform: rotate(acos(2 * 0.125));

/* Other values */
transform: rotate(acos(pi / 5));
transform: rotate(acos(e / 3));

Tham số

Hàm acos(number) chấp nhận chỉ một giá trị làm tham số.

number: Một phép tính cho kết quả là <number> từ -1 đến 1.

Giá trị trả về

Cosin nghịch đảo của number sẽ luôn trả về một <angle> từ 0deg đến 180deg.

Nếu number nhỏ hơn -1 hoặc lớn hơn 1, kết quả là NaN.
Nếu number chính xác là 1, kết quả là 0.

Cú pháp chính thức

<acos()> = 
  acos( <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

Ví dụ

Xoay các phần tử

Hàm acos() có thể được sử dụng để xoay các phần tử vì nó trả về một <angle>.

HTML

html

<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

CSS

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

css

div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(acos(1));
}
div.box-2 {
  transform: rotate(acos(0.5));
}
div.box-3 {
  transform: rotate(acos(0));
}
div.box-4 {
  transform: rotate(acos(-0.5));
}
div.box-5 {
  transform: rotate(acos(-1));
}

Kết quả

Thông số kỹ thuật

Specification
CSS Values and Units Module Level 4 # trig-funcs

Khả năng tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content