CSS 변환이 가진 능력 - transform

• 사물 회전, 원근 왜곡, 확대, 축소, 늘리기, 기울이기 등 가능
• 섹션을 나눠서 전체를 회전, 축소 등 할 수 있음

rotate

section:first-of-type h1:nth-of-type(1){
    transform-origin: top right;
    transform: rotate(45deg);
}

• deg, grad, rad, turn 사용 가능
• transform-origin: 을 통해 어디를 기준으로 회전할지 정할 수 있다. (쓰지 않으면 중앙 기준)
  • top right, bottom right 등
• rotateX
  • 3차원 공간에서 x축을 따라 회전
• rotateY
  • 3차원 공간에서 y축을 따라 회전
• ratateZ
  • 3차원 공간에서 z축을 따라 회전

scale

section:first-of-type h1:nth-of-type(2){
    transform: scale(0.6);
    transform: scale(2,1);
}

• 크기를 확대 혹은 축소
• X,Y,Z,3D 등이 있고 scale만 사용할 수도 있음
• 숫자 2개를 넣으면 각각 너비와 높이를 의미(scaleX, scaleY)

translate(moving)

section:first-of-type h1:nth-of-type(3){
    transform: translateX(200px);
}
section:first-of-type h1:nth-of-type(4){
    transform: translate(-100px, 50px);
}

• 요소를 움직이는 기능
• 오른쪽, 위, 아래 혹은 두 방향으로
• translateX, translateY, translate3D가 있음