728x90
* transform-origin(x,y,z) : 요소 변환의 기준점
x축 left, right, top, bottom, center, %(기본 설정50%)
y축 left, right, top, bottom, center, %(기본 설정50%)
z축 0
* transform-style : 3d 변환 요소의 자식요소에 3d 변환 사용 여부 설정(부모요소에 css 적용)
flat 자식요소에 사용 안함(기본 설정)
preserve-3d 자식요소에 3d 변형 효과 적용
* perspective : 하위 요소를 관찰하는 원근 거리 설정(관찰 대상의 상위/부모 요소에 적용)
- perspective 속성과 함수의 차이점
1. 속성은 관찰대상의 상위/부모 요소에 적용되고 함수 transform:perspective()는 관찰 요소에 적용되는 것이 차이점
2. 기준점이 다름
속성 perspective-origin
함수 transform-origin
* perspective-origin(x,y) : 원근 거리의 기준점 설정 (perspective와 동일하게 관찰대상의 상위/부모 요소에 적용)
x축 left, right, top, bottom, center, %(기본 설정50%)
y축 left, right, top, bottom, center, %(기본 설정50%)
* backface-visiblitiy : 3d 변환으로 회전된 요소의 뒷면 숨김을 설정
visible (기본 설정)
hidden
'css' 카테고리의 다른 글
| multi columns(다단) (0) | 2020.07.05 |
|---|---|
| animation (0) | 2020.07.05 |
| transform(변환) (0) | 2020.07.04 |
| Transitions(전환) (0) | 2020.07.04 |
| 속성 선택자 with ^, $ (0) | 2020.07.03 |