3D 관련 속성들

perspective

• 3D 위취 원소에 원근감을 주기 위해 z = 0 평면과 사용자 사이의 거리를 결정
• 값이 크면 변형이 작고, 값이 작으면(효과가 크다) 변형이 크다.
• 속성은 부모에게 사용, 적용범위는 직계자식에게만 가능
• 음수 값은 적용되지 않는다.

perspective-origin

• 소실점을 의미
• 사용자가 보고 있는 좌표(x,y)를 결정
• 속성은 부모에게 사용
• 기본 값은 정중앙

note

perspective: 500px vs transform: perspective(500px)차이

perspective: 500px는 부모에게 사용

transform: perspective(500px): 요소에 직접적으로 사용

transform

• 2D, 3D 요소에 적용
• translate(), rotate(), scale()

3D 변형과 관련된 메소드

• 아래의 메소드를 사용하려면 원근감을 표현할 기준을 명시. perspective()필수

translateZ(z)	z축 거리만큼 이동
rotateZ(z)	z축 기준으로 회전, rotate() 동일
scaleZ(z)	z축 기준으로 크기를 배율 증감
translate3d(x,y,z)	현재의 위치에서 해당 요소를 주어진 x축, y축, z축 거리만큼 이동
rotate3d(x,y,z,angle)	해당 요소를 주어진 각도만큼 x,y,z 기준으로 회전
scale3d(x,y,z)	해당 요소의 크기를 주어진 배율만큼 x,y,z축 방향으로 늘리거나 줄임

transform-style

• 요소에 변형을 적용할 떄, 변환이 자식요소에 적용될지 안될지 결정
• flat: (기본값)평면에 배치
• preserve-3d: 3D 공간에 배치

backface-visibility

• 요소의 뒷면이 사용자를 향할 때 보이게 할지 설정
• 변형을 통해 3D 공간에서 회전되면 노출
• visible: (기본값) 뒷면을 보임
• hidden: 뒷면 보이지 않음