728x90
반응형
▶ transform
- 요소에 변환 효과(변형)를 지정.
- 요소를 회전시키거나 비틀거나 확대/축소, 이동시키는 등.
- 속성은 하나지만 그 안에 다양한 값을 가질 수 있음. 여러 함수들이 존재.
[사용 예시]
transform: 변환함수1 변환함수2 변환함수3 ...;
transform: 원근법 이동 크기 회전 기울임;
.box{
transform: rotate(2deg) translate(10px, 0);
}
- rotate는 회전을 의미.
- translate는 이동을 의미. x축, y축 순으로 값을 입력.
- position: relative;와 유사하게 동작. left: 10px;를 입력한 것과 유사하게 동작함.
- skew: 비틂, 기울임.
- scale: 크기.
- 변형 효과에는 2D와 3D가 있음. 평면적인 변형 효과와 삼차원적인 변형을 이뤄내는 효과.
- transform은 많은 경우 transition이나 애니메이션과 함께 사용됨.
728x90
반응형
'CSS' 카테고리의 다른 글
[CSS] transform 변환 속성 (0) | 2020.10.02 |
---|---|
[CSS] transform 변환 함수 (0) | 2020.10.02 |
[CSS] tansition (0) | 2020.10.02 |
[CSS] background-size (0) | 2020.09.30 |
[CSS] background-attachment (0) | 2020.09.30 |