CSS에서 사인, 코사인, 탄젠트 등을 계산합니다.
삼각 함수
CSS에서는 수학 표현식을 작성할 수 있습니다. 베이스에는 계산을 수행하는 calc() 함수가 있지만 min(), max(), clamp()도 들어봤을 것입니다.
이러한 함수를 조인하는 것은 삼각 함수 sin(), cos(), tan(), asin(), acos(), atan(), atan2()입니다. 이러한 함수는 CSS 값 및 단위 모듈 레벨 4에 정의되어 있으며 모든 브라우저에서 사용할 수 있습니다.
sin(), cos(), tan()
핵심 trig 함수 3가지는 다음과 같습니다.
cos(): 각도의 코사인 값(-1~1)을 반환합니다.sin(): 각도의 사인 값(-1~1)을 반환합니다.tan(): 각도의 탄젠트(−∞~+∞사이의 값)를 반환합니다.
자바스크립트 함수와는 달리 이 함수는 각도와 라디안 모두를 인수로 허용합니다.
다음 데모에서는 이러한 함수를 사용하여 --angle 세트를 둘러싼 삼각형을 구성하는 선을 그리는 데 사용됩니다.
- '빗변'(노란색 선)은 원의 중심에서 점 위치까지의 선입니다. 길이는 원의
--radius와 같습니다. - '인접'(빨간색 선)은 X축을 따라 원의 중심에서부터 시작되는 선입니다. 길이는
--radius에--angle의 코사인을 곱한 값과 같습니다. - 반대편(파란색 선)은 Y축을 따라 점의 중심에서부터 시작되는 선입니다. 길이는
--radius에--angle의 사인을 곱한 값과 같습니다. --angle의tan()함수는 점에서 X축을 향해 녹색 선을 그리는 데 사용됩니다.
asin(), acos(), atan(), atan2()
sin(), cos(), tan()의 원호 또는 역 대응 항목은 각각 asin(), acos(), atan()입니다. 이러한 함수는 반대 방향으로 계산하며, 숫자 값을 인수로 사용하고 이에 상응하는 각도를 반환합니다.
마지막으로 atan2()는 두 개의 인수 A와 B를 허용합니다. 이 함수는 양의 X축과 점 (B,A) 사이의 각도를 반환합니다.
예
이러한 함수의 사용 사례는 다양합니다. 다음은 몇 가지 선택 사항입니다.
중심점을 중심으로 원형 경로의 항목을 이동합니다.
다음 데모에서 점은 중심점을 중심으로 회전합니다. 각 점을 중심을 중심으로 회전한 다음 바깥쪽으로 옮기는 대신 각 점은 X축과 Y축을 중심으로 변합니다. X축과 Y축의 거리는 cos() 및 --angle의 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)
);
}
커뮤니티 하이라이트
Ana Tudor의 애니메이션 Möbius 스트립에서 볼 수 있듯이 cos()와 sin()는 번역 이상의 용도로 사용할 수 있습니다. 여기서 그 결과는 hsl() 색상 함수의 s 및 l 구성요소를 조작하는 데 사용됩니다.