CSS의 삼각 함수

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

Bramus

삼각함수

CSS에서는 수학 표현식을 작성할 수 있습니다. 계산을 실행하는 calc() 함수가 기본적으로 있지만 min(), max(), clamp()에 대해서도 들어보셨을 것입니다.

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

sin(), cos(), tan()

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

• 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()의 원호 또는 역은 각각 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만큼 오프셋됩니다.
• 세 개의 하위 요소 중 세 번째 하위 요소는 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 구성요소를 조작하는 데 사용됩니다.