3D 트랜스폼

3D 트랜스폼 (Transforms)

3D 트랜스폼 속성은 IE10 이상 지원한다.

트랜스폼을 적용할 요소에 적용 하는 속성

  • transform-origin : 회전을 시킬 축을 결정

    • 기본값 (50% 50%)

    • (0% 0%)일 때 이미지 위의 왼쪽 끝이 회전축이 된다.

  • backface-visibility : 사용자에게 요소의 뒷 면을 보일지 결정한다.

    • visible(기본값), hidden

  • rotateX()

  • rotateY()

  • rotateZ() = rotate()

  • rotate3d(x, y, z)

  • translateX()

  • translateY()

  • translateZ() = translate()

  • translate3d(x, y, z)

  • scaleX()

  • scaleY()

  • scaleZ() = scale()

  • scale3d(x, y, z)

  • skewX()

  • skewY()

  • skew()

    • skew는 skewZ()인 Z축이 없으며 사실 3D가 아니다.

  • perspective()

    • 투시도법 (원근법에 따라 눈에 보이는 그대로 그리는 기법)

    • 값이 커질 수록 왜곡이 작아진다.

    • 예를 들어, 건축도면 등에서 투시도법을 많이 사용

자식 요소를 3D 처리할 부모 요소에 설정

  • perspective

    • 값이 커질 수록 왜곡이 적어진다.

  • perspective-origin (원근법의 기준점을 설정)

  • transform-style: preserve-3d (요소의 자식이 3D 공간에 배치)

    • 반드시 설정을 해야 3D transform 속성이 적용된다.

예시

<backface-visibility> : 요소의 뒷면이 사용자를 향할 때 보여야 하는지 지정한다.

참고

Previous2D 트랜스폼Next트랜지션

Last updated

Was this helpful?