CSS 전환(transition) & 변환(transform)

CSS의 Transition, Transform 속성에 관해 간단히 적어봅니다.

Transition(전환)

CSS 속성의 시작과 끝을 지정하여 중간 상태를 애니메이션을 해주는 속성

개별 속성

값	의미	기본값
transition-property	전환 효과를 사용할 속성 이름	all
transition-duration	전환 효과의 지속시간 설정	0s
transition-timing-function	타이밍 함수(cubic-bezier) 지정	ease
transition-delay	전환 효과의 대기시간 설정	0s

다음과 같이 사용이 가능하다.

.box {
  width: 100px;
  height: 100px;
  background: lightgray;
  transition: width 2s linear, background 1s 0.5s;
}

.box:hover {
  width: 300px;
  background: aqua;
}

Transform(변환)

요소를 변환(크기, 위치, 기울림, 회전)하는 속성으로 2d, 3d로의 가능하며 좀 복잡하다.

Transform 속성

값	의미	기본값
transform-origin	요소 변환의 기준점 설정	중앙
transform-style	3D 변환 요소의 자식요소도 3D 변환 사용여부
perspective	하위 요소 관찰 원근거리 설정
perspective-origin	원근거리 기준점 설정
backface-visibility	3D 변환 시 회전된 요소 뒷면 숨김 설정

아래의 변환 함수들 외에 아래 처럼 position등 사용해서 전환등을 하는 등의 효과를 줄 수 있지만 이는 최적화 된 방법이 아니다.

.box {
  width: 100px;
  height: 100px;
  background: lightgray;
  transition: all 2s linear;
  position: absolute;
  top: 0;
  left: 0;
}

.box:hover {
  position: absolute;
  top: 200px;
  left: 200px;
}

Transform 2D 변환함수

값	의미	비고
translate(x, y)	이동(x, y)
translateX(x)	이동(x)
translateY(y)	이동(y)
scale(x, y)	크기(x, y)	배수
scaleX(x)	크기(x)	배수
scaleY(y)	크기(y)	배수
rotate(deg)	회전
skew(x-deg, y-deg)	기울임(x, y)
skewX(x-deg)	기울임(x)
skewY(y-deg)	기울임(y)
matrix(n * 6)	2차원 변환 효과

Transform 3D 변환함수

값	의미	비고
translate3d(x, y, z)	이동(x, y, z)
translateZ(z)	이동(z)
scale3d(x, y, z)	크기(x, y, z)	배수
scaleZ(z)	크기(z)	배수
rotate3d(x, y, z, a)	회전(x, y, z, deg)
rotateX(x)	회전(x)
rotateY(y)	회전(y)
rotateZ(z)	회전(z)
perspective(n)	원근법(거리)
matrix(n * 16)	3차원 변환 효과

최적화 관련

사실 Transition의 타이밍 함수는 cubic-bezier로 브라우저가 인식하여 동작한다. 이와 마찬가지로 Transform의 함수 역시 matrix로 변환하여 동작한다. 상기 함수들이 직관적으로 사용하기 어려워 다양한 함수를 제공한 것이다. 브라우저가 읽고 동작하는데 있어서는 이 함수들을 적용시켜주는 부분이 좋다.