[CSS] transform

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

• https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
• https://developer.mozilla.org/ko/docs/Web/CSS/transform