[패스트캠퍼스][프론트엔드] 51. transform 변환 속성 & matrix() 함수

여전히 강의를 듣고 공책에 메모를 한다

패스트캠퍼스 프론트엔드 올인원 with React 공부 정리글입니다!

50일 챌린지의 기본 미션은 모두 완료했고, 최종 미션 전까지 원래 하던 공부를 꾸준히 하려고 해요.

지난 50일과 다른 점이라면 강의는 매일 듣되, 블로그 글은 한 커리큘럼을 마무리지을 때마다 정리용으로 작성하려고 합니다.

 

이 글은 2020/12/08에 학습한 17번째 커리큘럼의 transform 변환 속성에 관한 내용을 담고 있습니다.

---

 

transform 변환 속성

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

 

transform-origin

◾ 요소 변환의 기준점 설정

 

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

 

◽ 0% 0% : 좌측 상단

◽ 100% 100% : 우측 하단

 

transform-style

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

 

값	의미	기본값
flat	자식 요소의 3D 변환을 사용 ❌	flat
preserve-3d	자식 요소의 3D 변환을 사용 ⭕	.

 

(JSFiddle)

 

perspective

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

값	의미
단위	px, em,cm 등 단위로 지정

 

◽ perspective: 200px; 과 같이 사용함

◾ 속성 값이 작을 수록 기준점 가까이에 있음

 

⭐ perspective 속성과 함수의 차이점

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

 

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

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

 

perspective-origin

◾ 원근 거리의 기준점 설정

 

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

 

(JSFiddle)

 

backface-visibility

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

 

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

 

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

◾ 요소의 2차원 변환(Transforms) 효과 지정

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

◾ 브라우저 계산에 최적화 됨. 브라우저가 쓰는 용도임!

◽ 요소에 일반 변환 함수를 사용하더라도 브라우저에 의해 matrix 함수로 계산되어 적용됨 (2D 변환 함수 ➡ matrix() / 3D 변환 함수 ➡ matrix3d())

➡ 일반적인 경우에는 matrix 함수가 아닌 일반 변환 함수를 사용하면 됨!

 

(예제 이미지)

(JSFiddle)

 

---

강의 링크: https://bit.ly/3m0t8GM