CSS에서 사인, 코사인, 탄젠트 등을 계산합니다.
삼각함수
CSS에서는 수학 표현식을 작성할 수 있습니다. 계산을 실행하는 calc()
함수가 기본적으로 있지만 min()
, max()
, clamp()
에 대해서도 들어보셨을 것입니다.
이러한 함수와 함께 삼각 함수 sin()
, cos()
, tan()
, asin()
, acos()
, atan()
, atan2()
도 제공됩니다. 이러한 함수는 CSS 값 및 단위 모듈 레벨 4에 정의되어 있으며 모든 브라우저에서 사용할 수 있습니다.
sin()
, cos()
, tan()
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
구성요소를 조작하는 데 사용됩니다.