1. Transition과의 차이점
앞서 다루어봤던 Transition과의 차이점이라고 한다면, Transition의 경우 변화가 일어나는 방점이 2D인 애니메이션인데 반해 Transform의 경우 3D의 영역까지 애니메이션 적용이 가능하며,
그러나 이 둘의 차이점에 의한 장단점 보다는, Transition에 Transform 속성을 적용하여 사용하는 것에 주 방점을 두시면 될 것 같습니다.
2. Translate 함수
해당 요소를 x축과 y축으로 각각 이동 시킬 수 있으며 일부 절대 및 상대 단위의 혼용 사용이 가능합니다. 이때 절대 단위를 사용할 경우 해당 거리만큼을 이동하고, 상대 단위를 사용할 경우 자신의 가로 혹은 세로 넓이의 비례만큼 이동합니다.
또 x,y 방향값 중 한가지 값만 주면 x축과 y축 방향으로 동일한 값이 이동이 되기 때문에, 만약 한 축만을 이동하고 싶은 경우
translateX또는translateY함수를 사용하여 해당 축만 이동시킬 수 있습니다.
3. Scale 함수
요소가 현재 위치하는 곳에서 확대 및 축소를 가능하게 하며, 기본값은 1로 지정되어 있고 1에서 0까지는 축소를, 다시 1 이상의 양의 정수는 확대를 의미하는데요.
재밌게도 이 속성은 음수값을 입력할 경우 0부터 -1까지는 해당 아이템의 방향의 반전을 의미하게 되며, -1 이상부터는 반전 된 상태에서 확대를 의미하기 때문에 아이템의 반전 속성을 줄 때 사용되기도 합니다.
마찬가지로 이 속성 함수 또한 Translate 함수와 같이 하나의 값을 줄 경우 x,y 좌표 둘 다 영향을 받고 scaleX, scaleY로 단방향 값 적용 또한 가능합니다.
4. Skew 함수
해당 x축 혹은 y축의 각도를 부여하며, 이때의 속성값 단위는 deg(degree|각도)를 사용합니다. rad도 단위가 있기는 한데 거의 deg를 사용합니다.
이 함수의 특징은 각각의 방향으로 deg를 90deg, 180ddeg를 줬을 때 화면상에 아이템이 완전히 사라지며, transition과의 조합으로 자연스럽게 각도가 꺽이는 효과를 연출할 수 있습니다.
이 함수도 Translate와 Scale함수와 마찬가지로 하나의 값을 줄 경우 두 좌표 모두 적용하고, skewX, skewY로 단방향 값 적용 또한 가능합니다.
5. Rotate 함수
아이템의 회전을 부여할 수 있으며, Skew 함수와 마찬가지로 deg 단위를 사용합니다. 이 함수도 rotateX, rotateY 키워드로 각각 X축과 Y축으로의 3차원 회전 효과를 부여할 수 있으며
특이하게도 단독 키워드 사용시 x와 y축을 매개변수로 받을 수 있는 다른 함수들과는 다르게 rotate 함수는 단독으로 사용시 하나의 매개변수만을 받아 단순한 2차원 회전만 가능하기 때문에 x, y의 좌표를 이용한 3차원 회전과의 차별점을 기억해둘 필요가 있습니다.
⭐ 방향에 음수를 적용하는 것은 반대 방향으로의 이동을 의미하기 때문에, 단순한 크기의 축소라기 보다는 반대 방향으로 값을 지정하겠다고 생각해 주시면 되겠습니다. (기본적으로 양의 정수값은 시계방향, 음의 정수값은 그 반대 시계방향을 의미합니다.)
6. Perspective 속성을 이용한 변화의 입체적 부각 효과
속성 중에는 perspective라는 속성이 존재하는데요. 이 속성은 transform 속성을 가지고 있는 개별 아이템들에 적용하는게 아니라 그 아이템들을 가지고 있는 container 태그(상위 태그)에 적용하는 효과로,
해당 아이템들이 transform 속성으로 변화를 가질 때 원근감을 주면서 변화시키기 때문에 해당 변화가 더욱 입체적으로 돋보이게 할 수 있습니다.
