반응형
transform이란?
- 좌표공간을 변형함
- 일반적인 문서 흐름을 방해하지 않고
콘텐츠의 형태와 위치
를 바꿈
transform의 변형
- 평면에서의 변형
- 3D 공간에서의 회전, 확대, 이동, 기울이기
- 회전:
rotate()
- 확대축소:
scale()
- 이동:
translate()
,translateX()
,translateY()
- 기울이기:
skew()
- 회전:
예제
HTML
<div>Transformed element</div>
CSS
div {
border: solid red;
transform: translate(30px, 20px) rotate(20deg);
width: 140px;
height: 60px;
}
결과
Reference
반응형