[CSS] transform

2020. 10. 2. 11:43HTML, CSS/CSS

▶ 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이나 애니메이션과 함께 사용됨.

'HTML, CSS > 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