Properties

Properties

Editing
  • account_tree
  • bug_report

perspective-origin

입체 대상을 보고 있는 투시점의 위치를 정의한다.

사용 가능한 값 타입

〈position〉

박스형의 요소에 대한 상대적인 2차원 좌표 값을 나타낸다.

사용되는 키워드

  • bottom

    배경의 끝나는 위치를 요소의 하단에 맞춘다.

  • center

    배경의 중심을 요소의 중앙에 맞춘다.

  • left

    배경의 시작되는 위치를 요소의 좌측에 맞춘다.

  • right

    배경의 끝나는 위치를 요소의 우측에 맞춘다.

  • top

    배경의 시작되는 위치를 요소의 상단에 맞춘다.

동일한 타입을 사용하는 관련 속성

〈percentage〉

어떠한 기준으로 부터 백분율로 표현한다.

〈length〉

숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

사용되는 단위

이 속성에서 아래의 모든 단위를 사용할 수 있는 것은 아니므로 주의한다.

  • cm

    96px를 2.54로 나눈 값을 나타낸다.

  • in

    1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

  • mm

    1cm의 1/10 값을 나타낸다.

  • pc

    1in의 1/16 값을 나타낸다.

  • pt

    1in의 1/72 값을 나타낸다.

  • px

    스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

  • Q

    1cm의 1/40을 나타낸다.

  • deg

    보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

  • grad

    400grad(그라디안)은 완전한 원을 만든다.

  • rad

    2π(라디안)이 완전한 원을 만든다.

  • turn

    1turn(턴)이 완전한 원을 만든다.

  • cap

    대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

  • ch

  • em

    대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

  • ex

    대상 요소의 폰트의 x 높이값을 상대 기준으로 사용한다.

  • ic

  • lh

    대상 요소의 줄 높이를 상대 단위의 기준으로 사용한다.

  • rem

    html 요소의 폰트 크기를 상대 기준으로 사용한다.

  • rlh

    html 요소의 줄 높이를 상대 단위의 기준으로 사용한다.

  • Hz

    1초당 발생한 진동수를 나타낸다.

  • kHz

    1000Hz를 나타낸다.

  • fr

    그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

  • vb

    html 요소의 볼록축 방향으로 뷰포트 길이의 1%를 나타낸다.

  • vh

    뷰포트 높이를 상대적으로 1% 높이를 갖는다.

  • vi

    html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

  • vmax

    뷰포트의 가로와 세로 크기 중 큰쪽의 1%를 나타낸다.

  • vmin

    뷰포트의 가로와 세로 크기 중 작은쪽의 1%를 나타낸다.

  • vw

    뷰포트 너비를 상대적으로 1% 폭을 갖는다.

  • dpcm

    1cm당 점의 수를 나타낸다.

  • dpi

    1in(인치)당 점의 수를 나타낸다.

  • dppx

    1픽셀당 점의 수를 나타낸다.

  • ms

    밀리초(milliseconds)를 나타낸다.

  • s

    초를 나타낸다.

구문

  • perspective-origin 50% 50%;CSS Transforms Module Level 2
  • object.style.perspectiveOrigin = "left top";CSS3

예제

perspective-origin 값 설정에 따른 결과 샘플 코드

버전 명세

Modules
Module NameStatusSummary
CSS Transforms Module Level 2초안 작업

Last review date: 2022-11-14

지원 웹브라우저