17 - transform (변환 속성)

속성	의미
transform-origin	요소 변환의 기준점을 설정
transform-style	3D 변환 요소의 자식 요소도 3D 변환을 사용할지 결정
perspective	하위 요소를 관찰하는 원근 거리를 설정
perspective-origin	원근 거리의 기준점을 설정
backface-visibility	3D 변환으로 회전된 요소의 뒷면 숨김을 설정

 

 

 

transform-origin

요소 변환의 기준점을 설정

값	의미	기본값
X축	left, right, center, %, 단위	50%
Y축	top, bottom, center, %, 단위	50%
Z축	단위	0

 

 

 

transform-style

3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정

값	의미	기본값
flat	자식 요소의 3D 변환을 사용하지 않음	flat
preserve-3d	자식 요소의 3D 변환을 사용함

preserve-3d를 사용할 경우, 자식이 사용함을 알려주는 것이지, 자식의 자식은 해당 사항이 없기에,

계속해서 물려줄 거라면 계속해서 해당 기능을 선언해줘야 함.

 

 

 

perspective

하위 요소를 관찰하는 원근 거리를 설정

값	의미	기본값
단위	px, em, cm 등 단위로 지성

		적용대상	기준점 설정
속성	perspective	관찰 대상의 부모 요소	perspective-origin
함수	transform: perspective()	관찰 대상	transform-origin

perspective 속성은 관찰 대상의 부모(조상) 요소에 적용하여 하위 요소들을 관찰하는 원근 거리를 설정

transform: perspective() 변환 함수는 관찰 대상에 직접 적용하여 그 대상을 관찰하는 원근 거리를 설정

 

perspective-origin

원근 거리의 기준점을 설정

값	의미	기본값
X축	left, right, center, %, 단위	50%
Y축	top, bottom, center, %, 단위	50%

 

backface-visibility

3D 변환으로 회전된 요소의 뒷면 숨김을 설정

값	의미	기본값
visible	뒷면 숨기지 않음	visible
hidden	뒷면 숨김

 

 

---

matrix는 '이런 식으로 동작한다' 정도로만 알아도 OK

 

matrix(a, b, c, d, e, f)

요소의 2차원 변화(Transforms) 효과를 지정

scale(), skew(), translate() 그리고 rotate()를 지정

요소에 일반 변환(Transforms) 함수(2D, 3D)를 사용하더라도 브라우저에 의해 matrix 함수로 계산되어 적용된다.

(2D 변환 함수는 matrix로, 3D 변환 함수는 matrix3d로)

따라서 일반적인 경우는 matrix 함수가 아닌 일반 변환 함수를 사용하면 된다.