transform 속성은 HTML 요소를 회전, 크기 조절, 기울이기, 이동 효과를 나타낼 때 사용

주의점

transform은 단일 속성으로 취급되기 때문에, 애니메이션 내에서 정의된 transform이 기존 스타일에 설정된 transform을 덮어써 버린다.
예시

.sun {
  transform:rotate(30deg) skew(30deg, 10deg); //적용 안됨
  animation: 4s linear alternate infinite sun-rise
}
@keyframes sun-rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

transform과 변형 함수

//기본형
transform: 변형함수;

//예시
.photo { transform : translate(50px, 100px); }

translate 변형 함수 - 요소 이동

// x축으로 20px 이동
transform: translateX(20px);

// y축으로 40px 이동
transform: translateY(40px);

// x축으로 20px, y축으로 40px 이동
transform: translate(20px, 40px);

// x축으로 20px, y축으로 40px, z축으로 60px 이동
transform: translate(20px, 40px, 60px);

scale 변형 함수 - 요소 확대/축소하기

1보다 크면 확대, 작으면 축소한다.

• scale(sx,sy) : 지정한 크기만큼 x축과 y축으로 확대/축소

• scaleX(sx) : 지정한 크기만큼 x축으로 확대/축소

• scale(sy) : 지정한 크기만큼 y축으로 확대/축소

• rotate(각도) : 지정한 각도만큼 회전

• matrix3d(n,n,n) : 4*4행렬을 이용해 이동과 확대/축소, 회전 등의 변환 지정

• scale3d(sx,sy,sz) : 지정한 크기만큼 x축과 y축, z축으로 확대/축소

• scaleZ(각도): 지정한 각도만큼 z축으로 회전

transform:scale(sx,sy)

transform:scale3d(sx,sy,sz)

transform:scaleX(sx)
transform:scaleY(sy)
transform:scaleZ(sz)

rotate 변형 함수 - 요소 회전하기

rotate 함수

transform:rotate(각도): 양수일때 오른쪽 회전, 음수일때 왼쪽 회전

transform:rotate(rx,ry,각도)

• rotateX(각도): 지정한 각도만큼 x축으로 회전
• rotateY(각도): 지정한 각도만큼 y축으로 회전
• rotateZ(각도): 지정한 각도만큼 z축으로 회전
• rotate(rx,ry,각도), rotate3d(rx,ry,rz, 각도) : 지정한 각도만큼 회전

prespective 속성

부모 요소에 원근감 추가 (픽셀값이 클수록 사용자에게서 멀어짐)

• perspective(길이): 입체적으로 보일 수 있는 깊이 값을 지정

perspective-origin: x축값 or y축값

---

skew 변형 함수 - 요소를 비틀어 왜곡하기

• skew(ax,ay) : 지정한 각도만큼 x축과 y축으로 왜곡
• skewX(ax) : 지정한 각도만큼 x축으로 왜곡
• skewY(ay) : 지정한 각도만큼 y축으로 왜곡

@keyframe

시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다

참고 블로그