brunch

매거진 CSS 애니메이션

라이킷 31 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 구구 Dec 26. 2016

CSS Transform 속성

이번 글에서는 Transform 속성에 대해 이야기해보려 합니다.

애니메이션 속성에 대해 썼던 글과 마찬가지로, 기본적인 내용에 대해서만 다룰 예정입니다.

속성들을 조합하여 활용하는 방법에 대해선 기초를 다지는 작업 후 차근차근 발행할 예정이에요.

Transform 2D 함수(functions)

matrix

translate

translateX

translateY

scale

scaleX

scaleY

rotate

skew

skewX

skewY

Transform 3D 함수(functions)

perspective

matrix3d

translate3d

translateZ

scale3d

scaleZ

rotate3d

rotateX

rotateY

rotateZ

Transform 함수들은 transform: scale(2, 0.5)과 같은 형태로 사용할 수 있습니다.

동시에 여러 개도 쓸 수 있는데 transform : scale(2, 0.5) rotate(45deg)처럼 쓰면 됩니다.

함수들끼리 조합만 잘 한다면, 재밌는 효과들을 구현할 수 있어요.

하지만 조합을 하기 전에 속성들이 어떤 기능을 하는지 아는 것이 우선이겠죠?

transform: matrix(1, 2, 3, 4, 5, 6);

matrix는 다른 함수들의 기초가 되는 함수입니다.

그래서 matrix를 제대로 쓸 줄 알면 다른 transform 함수들을 조합해서

사용하는 것보다 간결하게 작성할 수 있습니다. 하지만 직관적이지는 않아요.

CSS의 transform 속성을 사용함으로써, CSS의 시각적 서식 모델(visual formatting model)의 좌표 공간을 변형시킬 수 있습니다. 해당 속성에 지정된 값에 따라 요소에 이동(translate), 회전(rotate), 크기 변경(scale), 기울임(skew)등의 효과를 줄 수 있어요.

왜 다른 함수들의 기초가 되는지 알 수 있는 [표]입니다.

transform: matrix(2, 0, 0, 2, 0, 0)과 trasform: scale(2)는 결과적으로 같은 모습을 보여줍니다.

transform: matrix(1, 0, 0.363970234266202, 1, 0, 0)
transform: skew(20deg) // tan(20) == 0.363970234266202

scale, translate, skew, rotate는 matrix 함수를 손쉽게 사용할 수 있도록 도와주는 함수들입니다.

왜 matrix 함수가 존재하고 어떤 역할을 하는지에 대해선 충분히 설명한 것 같으니 넘어가도록 할게요.

transform: translate(tx, ty);

좌표평면에서의 2D 이동(translation) 함수입니다.

만약 ty값을 지정하지 않는다면, 0 값으로 가정하여 계산합니다.

transform: translate(300px) == tranform: translateX(300px)

transform: translateX(tx);

요소를 X축을 따라 지정된 값만큼 이동(translate)시킵니다.

transform: translateY(ty);

요소를 Y축을 따라 지정된 값만큼 이동(translate)시킵니다.

transform: scale(sx, sy);

2D 크기 변환 함수입니다. 만약 sy가 설정되어 있지 않다면, sx와 동일한 값으로 간주합니다.

transform: scale(2, 2) == transform: scale(2)

transform: scaleX(sx)

transform: scale(sx, 1)와 같은 모습을 보여줍니다.

transform: scaleY(sy)

transform: scale(1, sy)와 같은 모습을 보여줍니다.

tranform: rotate(angle);

요소를 자신의 원점(또는 transform-origin 속성에 설정된 지점)을 기준으로

설정된 각도(angle)만큼 시계방향으로 회전시킵니다.

transform-origin은 transform에 대한 원점을 지정하는 속성입니다.

기본 값은 50% 50%. 즉 요소의 정중앙입니다.

값으로는 px, %, cm 등등 외에도 left, center, right, top, bottom를 쓸 수 있습니다.

transform-origin: left top;
transform-origin: right bottom;
transform-origin: center top;
transform-origin: center center;

transform: skew(ax, ay);

요소에 X, Y축을 중심으로 설정된 각도만큼 기울인다.

만약 ay값을 지정하지 않으면, Y축으로는 기울임(skew) 연산이 적용되지 않습니다.

transform: skew(20deg) == transform: skewX(20deg)

transform: skewX(angle);

X축을 기준으로 정해진 각도만큼 기울인다.

transform: skewY(angle);

Y축을 기준으로 정해진 각도만큼 기울인다.

transform: perspective(100px);

perspective 함수는 약간의 원근감을 주기 위해 z=0 평면과 사용자 사이의 거리를 정의합니다.

z> 0 인 3D 요소들은 커지고, z <0 인 3D 요소들은 더 작아집니다.

요소에 Z값을 줬는데 변화가 없으면 perspective 함수의 값을 설정해보세요.

transform: matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)

matrix3d는 함수 이름에서부터 알 수 있듯이 좌표평면이 아닌 좌표 공간에 대한 함수예요.

matrix(a, b, c, d, tx, ty) == matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

좌표 공간을 다루는 것은 꽤 어려우므로 정신건강에 좋은 사이트를 이용하도록 합시다.

http://www.useragentman.com/matrix/

혹시나 3d 함수들은 어떤 행렬을 가지고 있는지 더 자세하게 알고 싶은 분이 계신다면,

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function

이 사이트에서 함수들을 클릭하여 확인해보세요.

transform: translate3d(tx, ty, tz);

좌표 공간에서의 3D 이동(translation) 함수입니다.

transform: translateZ(tz);

요소를 Z축을 따라 지정된 값만큼 이동(translate)시킵니다.

transform: scale3d(sx, sy, sz);

3D 크기 변환 함수입니다.

transform: scaleZ(sz)

transform: scale(1, 1, sz)와 같은 모습을 보여줍니다.

transform: rotate3d(x, y , z, angle);

3D 공간에서 회전에는 3개의 자유도가 있으며 회전축을 나타냅니다.

회전축은 요소의 원점(transform-origin으로 정의된 값)과 rotate3d(x, y, z, angle)를 통과합니다.

위 이미지는 tranform: rotate3d(4, -4, 4, angle)에 대한 이미지에요. 빨간색 점선이 회전축입니다.

예제 링크 : http://codepen.io/SeongJ1n/pen/gLJVWg

transform-origin: left bottom;
animation-name: rotate3d;
animation-duration: 2s;

@keyframes rotate3d {
from { transform: rotate3d(0, 0, 0, 0deg); }
to { transform: rotate3d(0, 0, 1, 360deg); }
}

예제 링크로 이동해서 값을 바꿔보시면 이해가 쉽게 되실 거예요.

transform: rotateX(angle);

요소의 원점을 지나는 X축을 기준으로 지정된 값만큼 회전시킵니다.

transform: rotateY(angle);

요소의 원점을 지나는 Y축을 기준으로 지정된 값만큼 회전시킵니다.

transform: rotateZ(angle);

요소의 원점을 지나는 Z축을 기준으로 지정된 값만큼 회전시킵니다.

이제 transform 속성에 대해 아실 것 같으신가요?

다음 글에서는 aniamtion-timing-function에서 잠깐 다뤘던 cubic-bezier와

커브 값에 대해서 조금 더 자세히 이야기해볼게요.

그것까지만 하면 어느 정도 기초는 다 이야기한 것 같네요. 그럼 안녕!