CSS에서 삼각함수 사용하기

* 다음은 <Trigonometric functions in CSS> 아티클을 번역 및 정리한 것입니다.

 

삼각함수

CSS에서는 수학 표현식을 작성할 수 있다.

기본적으로 계산을 수행하는 calc() 함수 외에도 min(), max(), clamp() 등을 들어 본 적이 있을 것이다.

Chrome 111에서 삼각함수 sin(), cos(), tan(), asin(), acos(), atan(), atan2()도 이 대열에 합류한다.

이 함수들은 <CSS Values and Units Module Level 4>에 정의되어 있으며 모든 브라우저에서 사용할 수 있다.

지원하는 브라우저

• chrome 111
• firefox 108
• edge 111
• safari 15.4

출처: https://developer.mozilla.org/en-US/docs/Web/CSS/cos#browser_compatibility

 

sin(), cos(), tan()

핵심이 되는 세 가지 삼각함수는 다음과 같다.

• cos(): 각도의 코사인 값(-1 이상 1 이하)을 반환
• sin(): 각도의 사인 값(-1 이상 1 이하)을 반환
• tan(): 각도의 탄젠트 값(-∞에서 +∞ 사이)을 반환

자바스크립트의 삼각함수가 매개변수와 반환값 모두 라디안(호도법)을 사용하는 반면, CSS 삼각함수는 각도와 라디안을 모두 매개변수로 받는다.

아래 데모에서 이 함수는 설정된 --angle 값에 따른 삼각형을 구성하는 세 변을 그리는 데 사용된다.

• 노란색 선인 빗변은 원의 중심에서 점까지의 선이다. 이 선의 길이는 원의 반지름인 --radius 값과 같다.
• 빨간색 선인 밑변은 원의 중심에서 x축을 따라 그은 선이다. 이 선의 길이는 반지름 --radius의 값과 --angle의 cos 값의 곱과 같다.
• 파란색 선인 대변은 원의 중심에서 y축과 평행하게 그은 선이다. 이 선의 길이는 반지름 --radius의 값과 --angle의 sin 값의 곱과 같다.
• --angle의 tan() 함수는 x축을 향하는 원의 접선인 초록색 선을 그리는 데 사용된다.

수학적 표기

h = r, a = r sinΘ, b = r cosΘ, c = r tanΘ

 

See the Pen CSS Trigonometric Functions: cos(), sin(), and tan() by web.dev (@web-dot-dev) on CodePen.

 

 

 

삼각함수를 더 자세히 알고 싶다면 mathisfun에서 알아보자.

 

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

sin(), cos(), tan()에 대응하는 호(arc) 또는 역함수는 각각 asin(), acos(), atan()이다.

이 함수들은 반대 방향으로 계산을 수행한다.

즉, 실수값을 매개변수로 받아 그에 해당하는 각도를 반환한다.
마지막으로 두 개의 매개변수 A와 B를 받는 atan2()가 있다.

이 함수는 양의 x축과 점 (B, A) 사이의 각도를 반환한다.

예제

지금까지 소개한 함수에는 다양한 예제가 있다. 다음은 그중 일부이다.

1. 원형 경로에서 아이템 이동시키기

아래 데모에서는 점들이 원을 그리며 회전한다.

각 점을 원의 중심을 기준으로 회전시켜 이동하는 대신 각 점의 위치를 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);
}

See the Pen CSS Trigonometric Functions: cos() and sin(): dots on a circle by web.dev (@web-dot-dev) on CodePen.

 

 

 

원 주위로 점을 일정하게 분산시키기 위해 각 점에는 nth-child 인덱스에 따라 오프셋이 추가로 주어진다.

예를 들어, 점이 3개라면 각 점 사이의 거리는 360°/3 = 120°이다.

• 3개의 점 중 첫 번째 자식 요소는 0 x 120° = 0°만큼의 오프셋을 가지게 된다.
• 3개의 점 중 두 번째 자식 요소는 1 x 120° = 120°만큼의 오프셋을 가지게 된다.
• 3개의 점 중 세 번째 자식 요소는 2 x 120° = 240°만큼의 오프셋을 가지게 된다.

2. 원점을 향하도록 요소 회전하기

atan2() 함수는 한 점에서 다른 점까지의 상대적인 각도를 계산한다.

이 함수는 쉼표로 구분된 두 개의 값, 즉 0, 0으로 표현되는 원점을 기준으로 다른 점의 y축 위치와 x축 위치를 매개변수로 받는다.
계산된 값으로 Individual Transform Properties를 사용하여 요소가 서로 마주보도록 회전시킬 수 있다.
아래 예제에서는 상자가 마우스의 위치를 향하도록 회전한다.

마우스의 위치는 자바스크립트를 통해 커스텀 프로퍼티에 동기화된다.

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)
          );
}

See the Pen CSS Trigonometric Functions: atan2() by web.dev (@web-dot-dev) on CodePen.

 

 

 

커뮤니티 하이라이트

Ana Tudor의 애니메이션 뫼비우스 스트립에서 볼 수 있듯이 cos()와 sin()은 단순한 변환 이상의 용도로 사용할 수 있다. 여기서는 삼각함수를 사용하여 hsl() 색상 함수의 s와 l 요소를 조작할 수 있도록 했다.

See the Pen Animated Möbius strip using CSS mathematical functions (Safari/ Firefox/ Chrome 111+) by Ana Tudor (@thebabydino) on CodePen.