디자인 아틀라스
EN
{} 최신 CSS·웹 기능

CSS 삼각함수

CSS Trigonometric Functions

`sin()` `cos()` `atan2()` 같은 삼각함수를 CSS 계산식 안에서 바로 쓰는 기능. 원형 배치·시계 바늘을 JS 없이 만듭니다.

다른 이름: sin() cos() tan()CSS trig
···
html
<div class="wrap">
  <div class="badge" id="badge"><svg viewBox="0 0 10 10"><path id="bpath" d="M1.5 5.2l2.6 2.6L8.5 2.4" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg><span id="btext">확인 중</span></div>
  <div class="ring" id="ring">
    <div class="dot" style="--i:0"></div><div class="dot" style="--i:1"></div><div class="dot" style="--i:2"></div>
    <div class="dot" style="--i:3"></div><div class="dot" style="--i:4"></div><div class="dot" style="--i:5"></div>
  </div>
</div>
css
.wrap{position:relative;width:100%;height:100%;display:grid;place-items:center}
.ring{position:relative;width:110px;height:110px;animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dot{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;background:var(--accent);
  translate: calc(cos(calc(var(--i) * 60deg)) * 48px - 6px) calc(sin(calc(var(--i) * 60deg)) * 48px - 6px)}
.ring.fallback .dot{translate:0 0}
.badge{position:absolute;top:0;right:0;display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:700;background:var(--bg);border:1px solid var(--line);color:var(--accent-3);z-index:2}
.badge.no{color:var(--accent-2)}
.badge svg{width:9px;height:9px}
js
const ok = CSS.supports('width', 'calc(cos(45deg) * 1px)');
const b=document.getElementById('badge'),p=document.getElementById('bpath'),t=document.getElementById('btext');
b.classList.toggle('no', !ok);
p.setAttribute('d', ok ? 'M1.5 5.2l2.6 2.6L8.5 2.4' : 'M2 2l6 6M8 2l-6 6');
t.textContent = ok ? 'CSS 삼각함수 지원됨' : '미지원 · JS Math 폴백';
const ring = document.getElementById('ring');
if (!ok) {
  ring.classList.add('fallback');
  [...ring.children].forEach((dot, i) => {
    const a = i * 60 * Math.PI / 180;
    dot.style.transform = `translate(${Math.cos(a) * 48 - 6}px, ${Math.sin(a) * 48 - 6}px)`;
  });
}

아이콘을 원 둘레에 고르게 배치하거나 시계 바늘 각도를 계산하는 건 전형적으로 JS `Math.sin`/`Math.cos`의 일이었습니다. CSS `calc()`는 사칙연산만 할 수 있어서, 각도를 좌표로 바꾸는 순간 JS로 넘어가야 했습니다.

CSS 삼각함수는 `calc()` 안에서 `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, `atan2()`를 그대로 쓸 수 있게 합니다. `transform: translate(calc(cos(var(--a)) * 50px), calc(sin(var(--a)) * 50px))`처럼 커스텀 프로퍼티로 각도를 넘기면 순수 CSS로 원형 배치나 시계 바늘 회전을 만들 수 있습니다.

기본 지원은 caniuse/MDN baseline을 확인하세요. 미지원 브라우저에서는 JS로 각 요소의 `left`/`top`(또는 `transform`)을 `Math.cos`/`Math.sin`으로 계산해 인라인 스타일로 넣는 것이 대안입니다.

언제 쓰나

아이콘을 원형으로 배치하거나, 시계·게이지 바늘 각도를 순수 CSS로 계산하고 싶을 때.