CSS
Animation Part-3 Transform
트랜지션은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다.
애니메이션은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다.
트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다. 트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다.
1. 2D Transform
transform function 설명 translate(x, y): 요소의 위치를 X축으로 y만큼, Y축으로 y만큼 이동시킨다.
(px, %, em)translateX(n): 요소의 위치를 X축으로 x만큼 이동시킨다.
(px, %, em)translateY(n): 요소의 위치를 Y축으로 y만큼 이동시킨다.
(px, %, em)scale(x, y): 요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소시킨다.
(0과 양수)scaleX(n): 요소의 크기를 X축으로 x배 확대 또는 축소시킨다.
(0과 양수)scaleY(n): 요소의 크기를 Y축으로 y배 확대 또는 축소시킨다.
(0과 양수)skew(x-angle, y-angle): 요소를 X축으로 x각도, Y축으로 y각도만큼 기울인다.
(+/-각도(deg))skewX(x-angle): 요소를 X축으로 x각도만큼 기울인다.
(+/-각도(deg))skewY(y-angle): 요소를 Y축으로 y각도만큼 기울인다.
(+/-각도(deg))rotate(angel): 요소를 angle만큼 회전시킨다
(+/-각도(deg))
Transform — translate
translate() 함수는 x축과 y축 상에서 해당 요소의 본래 위치로부터 x or y 축으로 움직여 페이지의 다른 어딘가로 이동시키는 역할을 한다. 예를 들면, 수평(x) 수직(y)축 상에서 위치를 재조정할 수 있고 또한 이를 별개로 수행할 수 있다.
translate 효과는 원래의 위치를 기반으로 이동하는 것이고 다른 요소의 레이아웃에 영향을 미치지 않는다(원래의 위치 정보는 남아있다).
translateX
translateY
translate위 코드를 보면 기준점이 되는 첫 번째 박스가 width: 100px; height: 100px; 인 것을 확인 할 수 있다. 그리고 순서대로
- translateX를 사용한 두 번째 박스는 x 축으로 50px 만큼 이동했다.
- translateY를 사용한 세 번째 박스는 y 축으로 50px 만큼 이동했다.
- translate을 사용한 네 번째 박스는 (x, y) 축으로 50px 만큼 이동한 것을 확인할 수 있다.
Transform — rotate
rotate() 함수는 x, y, z 축으로 박스에 회전을 줄 수 있다. 회전의 각도가 양수이면 시계 방향으로 회전하고 음수이면 반시계방향으로 회전한다. 주의할 점은 transform은 2D 환경에서 변형 효과를 나태내기 때문에 rotateX(80deg);를 적용했을 때 그 대상은 눕는 것처럼 보인다. 즉, 평면에서 찌그러트린 느낌이 든다. 이후 3D에 대해서 배울 때 자연스러운 형태를 구현할 수 있다.
rotateX
rotateY
rotate위 코드를 보면 기준점이 되는 첫 번째 박스가 width: 100px; height: 100px; margin: 50px; 인 것을 확인할 수 있다. 그리고 순서대로
- rotateX를 사용한 두 번째 박스는 x축 방향으로 45도 회전한 것을 확인할 수 있다. (다소 찌그러져 보이는 것을 확인할 수있다. 그 이유는 2D인 평면에서 3D 방식으로 동작해 소실점이 발생해서 그렇다.)
- rotateY를 사용한 세 번째 박스는 y축 방향으로 45도 회전한 것을 확인할 수 있다. (다소 찌그러져 보이는 것을 확인할 수있다. 그 이유는 2D인 평면에서 3D 방식으로 동작해 소실점이 발생해서 그렇다.)
- rotateZ를 사용하면 우리가 원하는 방식대로 45도 회전한 것을 확인할 수 있다. 그 이유는 z 축은 마치 평면상에서 회전하는 것처럼 보이기 때문이다.
- rotate를 사용하면 모든 rotate 방향에서의 회전이기 때문에 우리가 기대하는 크기만큼 회전하도록 만들 수 있다.
- rotateX(80deg)를 정의하면 완전히 눕는 것처럼 보인다.
Transform — scale
scale() 함수는 이미지를 확대하거나 축소하는 데 자주 사용된다. 예를 들면 마우스 오버(hover)를 한 경우 이미지가 커지는 효과 등에 사용할 수 있다. 마치 (width, height)을 변경해서 크기를 늘리는 것과 동일하게 생각할 수 있다. 하지만 (width, height)을 사용하면 정렬이 틀어질 수 있다. 그래서 scale을 위와 같은 상황에 사용한다. 더 쉽게 말하면 scale() 함수는 translate() 함수와 마찬가지로 다른 요소 혹은 레이아웃에 영향을 미치지 않기 때문에 유용하게 사용할 수 있다 (z-index가 높으면 다른 레이아웃에 영향을 미치지 않는 것과 연결해 생각하면 더 쉽게 이해할 수 있다)
요약: width, height 속성을 사용해 박스 혹은 요소의 크기를 키우거나 줄이는 경우 다른 박스와 박스간의 레이아웃에 여향을 미치지만, scale() 함수를 사용하면 translate() 함수와 마찬가지로 다른 요소에 영향을 미치지 않기 때문에 유용하게 사용할 수 있다.
scaleX
scaleY
scale위 코드를 보면 기준점이 되는 첫 번째 박스가 width: 100px; height: 100px; margin: 200px; 인 것을 확인할 수 있다. 그리고 순서대로
- scaleX에 인자값으로 2를 주었고 이것은 기존의 박스 크기를 x 축으로 2배 증가하는 것을 확인할 수 있다.
- scaleY에 인자값으로 2를 주었고 이것은 기존의 박스 크기를 y 축으로 2배 증가하는 것을 확인할 수 있다.
- scale에 인자값으로 2를 주었고 이것은 기존의 박스 크기를 x, y 축으로 2배 증가하는 것을 확인할 수 있다.
transform — skew
skew() 함수의 경우 x축, y축을 기준으로 각도를 주어 모양을 변형시킨다. 이것은 말로 하는 것보다 여러 번의 연습이 필요하다. 그러므로 연습을 많이 하자.
위 코드를 보면 기준점이 되는 첫 번째 박스가 width: 100px; height: 100px; margin: 100px; 인 것을 확인할 수 있다. 그리고 순서대로
- 두 번째 박스의 경우 skewX를 정의했으므로 x 축으로 45도만큼 변형된 것을 확인할 수 있다.
- 세 번째 박스의 경우 skewY를 정의했으므로 y 축으로 45도만큼 변형된 것을 확인할 수 있다.
- 네 번째 박스의 경우 skew를 정의했으므로 x, y 축으로 45도 만큼 변형된 것을 확인할 수 있다.
- 다섯 번째 박스의 경우 skew를 hover와 함께 정의했기 때문에 skew가 어떻게 동작하는지 더 잘 이해할 수 있을 것이다.
skew(비틀기)의 원리를 간단히 이해해보자.
각 요소에 x, y 축이 존재한다고 생각해보자.
- 가로 방향으로 skew(비틀기)하는 경우
x축은 가만히 있고 y축은 비튼 각도만큼 회전하게 된다.
2. 세로 방향으로 skew(비틀기) 하는 경우
y축은 가만히 있고 x축은 비튼 각도만큼 회전하게 된다.
즉, skewX()를 지정하면 y 축 skewY()를 지정하면 x 축이 회전하게 된다.
값이 양수면 반시계방향으로 틀리게 되고 값이 음수면 시계 방향으로 틀린다.
위 예제에서 skewX(45deg)의 경우 가로 방향으로 비틀면 x축(x선상)은 가만히 고정되고 y축(y선상에 있는)이 반시계방향으로 회전해 박스가 위와 같이 기울어진 것처럼 보이고, skewY(45deg)의 경우도 마찬가지로 주어진 값만큼 x 축이 회전한다.
요약: skewX 은 가로 방향으로 요소를 비틀게 되는데 동작 방식은 x축은 고정 y축이 기울고, skewY는 세로 방향으로 요소를 비틀게 되는데 동작 방식은 y축은 고정 x축이 기운다.
X, Y 축을 기준으로 기울이게 되는데,
X축은 좌/우 , Y축은 상/하로 기울이는 효과를 준다X축에 +(플러스) 각도는 우측, -(마이너스) 각도는 좌측으로 기울이는 효과
Y축에 +(플러스) 각도는 아래쪽, -(마이너스) 각도는 윗쪽으로 기울이는 효과
transform-origin(기준점 설정)
scale(), rotate() 함수 모두 특정 기준점을 기준으로 동작한다. transform-origin은 이 기준점을 설정하는 데 사용한다. 이 부분 또한 여러 번 사용해 이해하는 것이 가장 좋다.
위의 예제는 기준점을 요소의 바닥으로 옮겨서 아랫면은 고정된 채로 오른쪽으로만 기울게 된다.transform-origin 속성값은 다음과 같습니다.
x축 : left, center, right, length, %y축 : top, center, bottom, length, %z축 : length, view 가 z축에 배치되는 곳을 지정한다(3D 변환(transition)과 함께 사용될 경우)
요소의 기본기준점을 설정할 때 사용된다. 기본기준점은 요소의 정중앙이다(50%,50%). 이동은 기준점을 변경하여도 일정 거리만큼 이동함으로 의미가 없다. 설정값으로 %, px, top left, bottom right을 사용할 수 있다. 0, 0은 top left, 100% 100%는 bottom right과 같은 값이다.
왼쪽 제일위 (0%, 0%) or (left, left)
왼쪽 끝 아래(0%, 100%) or (left, bottom)
오른쪽 제일 위(100%, 0%) or (right, top)
오른쪽 제일 아래(100%, 100%) or (right, bottom)
translate 함수들은 position과 연관된 helper properties(top, left, right, bottom)과 어떻게 다른가?
position 속성은 해당 요소를 컨테이너 기준(각 position의 속성의 기준). 그에 반해서 translate()는 언제나 자신의 위치를 기준으로 하여 새 위치를 잡는다.
또한 position: absolute;가 적용된 요소는 레이아웃상의 다른 요소들과 완전히 별개의 존재가 되어 형제 요소들에게 어떠한 영향도 미치지 않는다. 그러나 translate()함수는 물리적으로 시야에 존재하는 한 해당 요소가 본래 차지하고 있던 공간을 그대로 유지하게 된다. 아래 그림을 보면 8번 박스가 이동했음에도 빨간색 테두리가 남아있는 것을 확인할 수 있다.
8번 요소와 같이 이동된 요소는 레이아웃과 별개로 동작한다. 그러므로 레이아웃의 경우 absolute가 적합하고. hover, active 등과 같은 상황에는 translate의 사용이 적합하다.
크롬 개발자이자 프론트 엔드 개발의 선두주자인 Paul Irish는 position 속성값과 translate(), 두 가지 방법을 사용한 애니메이션에 대해 다음과 같이 언급하고 있습니다.
top/left는 각 프레임을 그려내는 데 너무 많은 시간을 소요한다. 그 결과 약간 뚝뚝 끊어지는 듯이 전이가 이루어진다.
반면에 translate는 요소가 GPU(RenderLayer라고 불림)상에서 자기 자신의 레이어 위에 놓여지도록 만든다.
GPU 상에서 그 자신의 레이어 위에 놓이기 때문에 2D 전환이 훨씬 더 빠르게 진행되고 프레임 속도도 빠르다.
Tip: transform 여러 효과를 함께 사용하기
translate, rotate, scale, skew 효과를 하나로 묶어서 간편히 사용할 수 있다. 아래 예제 코드와 같이 공백을 구분자로 하여 각 함수를 나한리 작성할 수 있고, 효과는 차례대로 나타난다.
