변환 효과

사용예

transform: rotate(45deg) scale(1.3);

2D 변환 함수

translate(x, y)

이동(x축, y축)

translateX(x)

이동(x축)

translateY(y)

이동(y축)

scale(x,y)

크기(x축, y축)

• 수치를 하나만 입력하면 x와 y에 동시에 적용됩니다.
• 단위없이 숫자만 사용되고, 배수로 해석됩니다.
• 사용예

transform: scale(1.2);

rotate(degree)

회전(각도(deg))

skewX(x)

기울임(x축)

skewY(y)

기울임(y축)

3D 변환 함수

translate3d(x, y, z)

이동(x축, y축, z축)

rotateX(x)

회전(x축)

rotateY(y)

회전(y축)

perspective(n)

원근법(거리)

사용예

translate, translateX, translateY

scale, scaleX(2)

• scaleX의 경우 X축으로 늘리므로 찌그러져 나타납니다.
  그래서 scaleX와 scaleY는 사용빈도가 낮습니다.

rotate, rotateX, rotateY

• rotate 시계방향으로 회전합니다.
• 회전의 중심이 정중앙입니다. 이 회전의 중심은 바꿀 수 있습니다.
• rotateX와 rotateY는 앞서 설명한 대로 3D 변환 함수이지만 실제로 사용해보면 3d처럼 보이지는 않습니다.
  perspective를 적용하여 원근감을 주면 좀 더 3d처럼 나타납니다.

perspective를 적용한 rotateX와 rotateY

perspective 함수

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

• perspective는 원근감을 제공합니다.
• 500px은 원근거리를 의미합니다.

원근법 함수는 제일 앞에 작성해야 합니다!

skewX, skewY

변환 속성

perspctive

하위 요소를 관찰하는 원근 거리를 지정합니다.

• 여기서 설명할 perspective는 위에서 설명한 함수가 아닌 속성 입니다.

• perspective 함수를 사용했을 경우에는 관찰 기준점이 함수를 적용한 요소가 되지만, perspective 속성을 사용했을 경우에는 속성을 적용한 부모 요소가 됩니다.
• perspective 함수보다는 perspective 속성 사용을 더 권장합니다.

backface-visibility

3D 변환으로 회전된 요소의 뒷면 숨김 여부을 설정합니다.

• backface는 뒷면을 의미합니다.
• 기본값은 visible입니다.