📌요소의 변환 효과

---

transform

변환함수1 변환함수2 ...
원근법 / 이동 / 크기 / 회전 / 기울임

• 2D 변환 함수

PX	Deg(degree각도)
translate(x,y)	rotate(숫자deg)
translateX(x)	skewX(x)
translateY(y)	skewY(y)
scale(x,y)배수

• 3D 변환 함수

PX	Deg(degree각도)
perspective(n) 원근법(거리)	rotateX(x) 회전
	rotateY(y) 회전

---

transform: translate(위치)

40px = 인수(Argument)

transform: scale(숫자)

transform: rotate(각도)

원근법 추가!

transform: skewX(각도)

---

Perspective

• Perspective(함수)

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

  transform: perspective(500px) rotateY(45deg);

  • 단위
    px 등 단위로 지정

• Perspective(속성)

  부모요소에 부여함

  부모(container): perspective; 500px; / 자식(item): transform: rotateY(45deg);

Backface-visibility

3D 변환으로 회전된 요소의 뒷면 숨김 여부

• visible(기본값) 뒷면 보임

• hidden 뒷면 숨김

  transform: rotateY(180deg);
  backfeace-visibility: hidden;

---