[CSS] transform-style

- 2D 또는 3D 중 어떻게 표현할지를 설정한다.

- 속성은 부모에게 사용하고, 적용 범위는 자식에게만 적용된다. (자손X)

transform-style: flat; //기본값
transform-style: preserve-3d;

transform-style	flat (기본값)	preserve-3d
공간	평면(=2D)	3D
작성 위치	부모
적용 대상	자식에게 적용

 

*도형에 마우스를 올려주세요.

See the Pen preserve-3d의 적용의 차이 by mill (@millfeel) on CodePen.

perspective와 transform-style은 상속X

See the Pen perspective와 transform-style은 상속X by mill (@millfeel) on CodePen.

[perspective와 preserve-3d 응용] 카드 뒤집기

*도형에 마우스를 올려주세요.

See the Pen perspective와 preserve-3d 응용 - 카드 뒤집기 by mill (@millfeel) on CodePen.

- backface-visibility: hidden을 사용해서 카드의 뒷면이 안보이게 할 수 있다.

---

[공부 좌표]

transform-style