CSS에서 사인, 코사인, 탄젠트 등을 계산합니다.
삼각 함수
CSS에서는 수학 표현식을 작성할 수 있습니다. 맨 아래에는 계산을 위한 calc()
함수가 있지만 min()
, max()
, clamp()
도 들어보셨을 겁니다.
이러한 함수를 결합하는 것이 삼각 함수 sin()
, cos()
, tan()
, asin()
, acos()
, atan()
, atan2()
입니다. 이러한 함수는 CSS 값 및 단위 모듈 수준 4에 정의되며 모든 브라우저에서 사용할 수 있습니다.
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
구성요소를 조작하는 데 사용됩니다.