CSS perspective() 함수

정의와 사용법

CSS perspective() CSS에서 사용자가 z=0 평면과의 거리를 정의합니다.

perspective() 함수는 transform 속성에서 사용됩니다.

예제

사용 perspective() 두 개의 정육면체에 시각적 효과를 추가하세요：

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

직접 테스트해 보세요

CSS 문법

perspective(length|none)
값 설명
length 필수. 사용자가 z=0 평면으로부터의 거리를 지정합니다. none은 변환을 수행하지 않음을 의미합니다.

기술 세부 사항

버전： CSS Transforms Module Level 2

브라우저 지원

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

크롬 에지 파이어폭스 사파리 오페라
perspective()
12 12 10 4 15
perspective(none)
97 97 93 15.4 83

관련 페이지

튜토리얼：CSS 3D 변환

참조:CSS 트랜스폼 속성

참조:CSS rotate() 함수

참조:CSS rotate3d() 함수

참조:CSS rotateX() 함수

참조:CSS 라이제이트Y() 함수

참조:CSS 라이제이트Z() 함수