티스토리 뷰
- 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을 사용해서 카드의 뒷면이 안보이게 할 수 있다.
[공부 좌표]
'이론 > CSS' 카테고리의 다른 글
[CSS] transform의 translate 속성들 (0) | 2021.02.07 |
---|---|
[CSS] transform: perspective()와 perspective (0) | 2021.02.07 |
[CSS] perspective-origin (0) | 2021.02.07 |
[CSS] position (0) | 2021.01.27 |
[CSS] 기본 선택자, 그룹 선택자, 결합자 (0) | 2021.01.23 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- clientHeight
- 일치 연산자
- 동등 연산자
- 링크막기 #a링크막기
- @font-face
- outerHeight
- offsetHeight
- 객체의 프로퍼티
- constructor
- scrollTop
- __proto__
- 프로퍼티
- offsetTop
- prototype 프로퍼티
- 대괄포 표기법
- innerHeight
- 점 표기법
- clinetTop
- 동치 연산자
- javascript class
- 부등 연산자
- scrollHeight
- property
- [[Prototype]]
- 불일치 연산자
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함