CSS sin() 함수

정의와 사용법

CSS의 sin() 함수는 숫자(각도)의 정弦 값을 반환합니다.

각도의 정弦 값은 항상 -1과 1 사이의 값을 반환합니다.

예제

내부에서 calc() 함수에서 사용 sin() 세 개의 <div> 요소의 너비와 높이를 설정하려면:

div.a {
  width: calc(sin(0.25turn) * 120px);
  height: calc(sin(30deg) * 120px);
  background-color: salmon;
  margin-bottom: 25px;
}
div.b {
  width: calc(sin(90) * 120px);
  height: calc(sin(2*1.125) * 120px);
  background-color: green;
  margin-bottom: 25px;
}
div.c {
  width: calc(sin(pi/2) * 120px);
  height: calc(sin(pi/2) * 120px);
  background-color: maroon;
}

직접 테스트해 보세요

CSS 문법

sin(angle)

기술 세부 사항

브라우저 지원

표格에서의 숫자는 해당 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

관련 페이지

참조:CSS acos() 함수

참조:CSS asin() 함수

참조:CSS atan() 함수

참조:CSS atan2() 함수

참조:CSS calc() 함수

참조:CSS cos() 함수

참조:CSS exp() 함수

참조:CSS hypot() 함수

참조:CSS log() 함수

참조:CSS mod() 함수

참조:CSS 제곱() 함수

참조:CSS 제곱근() 함수

참조:CSS 탄() 함수