이 페이지는 Cloud Translation API를 통해 번역되었습니다.

CSS의 삼각 함수

CSS에서 사인, 코사인, 탄젠트 등을 계산합니다.

Bramus

삼각 함수

CSS에서는 수학 표현식을 작성할 수 있습니다. 맨 아래에는 계산을 위한 calc() 함수가 있지만 min(), max(), clamp()도 들어보셨을 겁니다.

이러한 함수를 결합하는 것이 삼각 함수 sin(), cos(), tan(), asin(), acos(), atan(), atan2()입니다. 이러한 함수는 CSS 값 및 단위 모듈 수준 4에 정의되며 모든 브라우저에서 사용할 수 있습니다.

브라우저 지원

111
111
108
15.4

소스

`sin()`, `cos()`, `tan()`

핵심 3가지 trig 함수는 다음과 같습니다.

cos(): 각도의 코사인(-1과 1 사이의 값)을 반환합니다.
sin(): -1에서 1 사이의 값인 각도의 사인을 반환합니다.
tan(): 각도의 탄젠트(−∞~+∞ 사이의 값)를 반환합니다.

JavaScript 함수와 달리 이러한 함수는 각도와 라디안을 모두 인수로 허용합니다.

다음 데모에서 이러한 함수는 --angle 세트를 둘러싼 삼각형을 구성하는 선을 그리는 데 사용됩니다.

'빗변' (노란색 선)은 원의 중심에서 점 위치까지의 선입니다. 길이는 원의 --radius와 같습니다.
'인접' (빨간색 선)은 X축을 따르는 원 중심으로부터의 선입니다. 길이는 --radius에 --angle의 코사인을 곱한 값과 같습니다.
'반대' (파란색 선)은 Y축을 따라 점 중심으로부터 시작되는 선입니다. 길이는 --radius에 --angle의 사인을 곱한 값과 같습니다.
--angle의 tan() 함수는 점에서 X축을 향해 녹색 선을 그리는 데 사용됩니다.

`asin()`, `acos()`, `atan()`, `atan2()`

sin(), cos(), tan()의 arc 또는 역 대응 요소는 각각 asin(), acos(), atan()입니다. 이러한 함수는 반대 방향으로 계산을 실행합니다. 즉, 숫자 값을 인수로 사용하고 이에 상응하는 각도를 반환합니다.

마지막으로 두 개의 인수 A와 B를 허용하는 atan2()가 있습니다. 이 함수는 양의 X축과 점 (B,A) 사이의 각도를 반환합니다.

예

이러한 함수의 사용 사례는 다양합니다. 그다음으로는 소수의 선택 항목이 있습니다.

중심점을 중심으로 원형 경로에 있는 항목 이동

다음 데모에서는 점이 중심점을 중심으로 회전합니다. 각 점은 자체 중심을 중심으로 회전한 다음 바깥쪽으로 이동하는 대신 X축과 Y축을 기준으로 이동하게 됩니다. X축과 Y축의 거리는 각각 --angle의 cos() 및 sin()를 고려하여 결정됩니다.

:root {
  --radius: 20vmin;
}

.dot {
  --angle: 30deg;
  translate: /* Translation on X-axis */
             calc(cos(var(--angle)) * var(--radius))

             /* Translation on Y-axis */
             calc(sin(var(--angle)) * var(--radius) * -1)
  ;
}

중앙 지점 주위에 점을 균일하게 배치하기 위해 각 점에 nth-child 색인을 기반으로 추가 오프셋이 제공됩니다. 예를 들어 점이 3개라면 각 점 사이의 거리는 120deg (= 360deg / 3)입니다.

세 개의 하위 요소 중 첫 번째 하위 요소는 0 x 120deg = 0deg만큼 오프셋됩니다.
세 개의 하위 요소 중 두 번째 하위 요소는 1 x 120deg = 120deg만큼 오프셋됩니다.
3개 중 세 번째 하위 요소는 2 x 120deg = 240deg만큼 오프셋됩니다.

원점을 향하도록 요소 회전

atan2() 함수는 한 점에서 다른 점까지의 상대 각도를 계산합니다. 이 함수는 쉼표로 구분된 두 개의 값을 매개변수로 허용합니다. 하나는 출발지 0,0에 있는 출발 지점을 기준으로 다른 지점의 y 및 x 위치입니다.

계산된 값을 사용하면 개별 변환 속성을 사용하여 요소가 서로를 향하도록 회전할 수 있습니다.

다음 예에서는 상자가 마우스 위치를 향하도록 회전합니다. 마우스 위치는 JavaScript를 통해 맞춤 속성에 동기화됩니다.

div.box {
  --my-x: 200;
  --my-y: 300;

  /* Position the box inside its parent */
  position: absolute;
  width: 50px;
  aspect-ratio: 1;
  translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);

  /* Rotate so that the box faces the mouse position */
  /* For this, take the box its own position and size (25 = half the width) into account */
  rotate: atan2(
            calc((var(--mouse-x) - var(--my-x) - 25) * 1),
            calc((var(--mouse-y) - var(--my-y) - 25) * -1)
          );
}

커뮤니티 하이라이트

아나 튜더의 뫼비우스 애니메이션 스트립에서 볼 수 있듯이 cos() 및 sin()는 단순한 번역 외에도 다양한 용도로 사용할 수 있습니다. 여기서 결과는 hsl() 색상 함수의 s 및 l 구성요소를 조작하는 데 사용됩니다.