CSS 속성(Properties) - 변환

transform

• transform: 변환함수1 변환함수2 변환함수3 …;
• transform: 원근법 이동 크기 회전 기울임;
• 요소의 변환 효과

📍 변환 함수

2D 변환 함수

• translate(x, y): 이동(x축, y축)
• translateX(x): 이동(x축)
• translateY(y): 이동(y축)
  • 단위: px
• scale(x, y): 크기(x축, y축)
  • 단위: 숫자, 소수점(배수)
• rotate(degree): 회전(각도)
  • 단위: deg
• skewX: 기울임(x축)
• skewY: 기울임(y축)
  • 단위: deg

3D 변환 함수

• rotateX(x): 회전(x축)
• rotateY(y): 회전(y축)
  • 단위: deg
• perspective(n): 원근법(거리)
  • 단위: px
  • 원근법 함수는 변환 함수 중 제일 앞에 작성

 

perspective(변환 함수 X, 속성 O)

• 하위 요소를 관찰하는 원근 거리를 지정
• 단위: px 등 단위로 지정

📍 perscpective 속성과 함수 차이점

속성/함수 적용 대상 기준점 설정

perspective: 600px;	관찰 대상의 부모	perspective-origin
transform: perspective(600px);	관찰 대상 자체	transform-origin

 

backface-visibility

• 3D 변환으로 회전된 요소의 뒷면 숨김 여부
• 값
  • visible [기본 값] : 뒷면 보임
  • hidden: 뒷면 숨김

 

---

※ 패스트캠퍼스 FE 프로젝트십 과정 중 강의를 듣고 정리한 내용입니다.