CSS transform

 # transform 

transform은 엘리먼트의 모양을 마음대로 변형할 수 있다.

transform으로 가능한 변형은 다음과 같다.

• 위치를 옮긴다.
• 회전을 시킨다.
• 크기를 조절한다.
• 박스를 비튼다.

transform은 이전의 transition과 animation이랑은 다르게 속성값으로 효과를 준다.

만약 두 가지 이상의 효과를 함께 주고 싶다면 한줄에 적도록 해야한다.

transition과 animation과 함께 사용하면 굉장히 많은 애니메이션 효과를 줄 수 있다.

---

 # transform 

정의(Define)

어떤 모양을 가진 엘리먼트에 변형을 줄 수 있다.

transform으로 줄 수 있는 속성은 크게 3가지(translate, scale, rotate)로 나눌 수 있다.

translate는 해당 축의 위치만큼 이동하며, 반대 방향은 -값을 주면된다.

scale은 크기를 확대시켜주며, 축소 시키고 싶다면 -값을 주면된다.

rotate는 각도를 비틀어주며, 반대 각도를 주고싶다면 -값을 주면된다.

 

각 X, Y, Z값은 아래 그림의 축이라고 생각하면 이해가 빠르다. (단, 화살표 방향이 양의 값이다.)

<그림 1>

문법(Syntax)

transform: translate();
transform: translateX([길이]);
transform: translateY([길이]);

transform: scale();
transform: scaleX([배율]);
transform: scaleY([배율]);

transform: rotate();
transform: rotateX([각도]);
transform: rotateY([각도]);
transform: rotateZ([각도]);

예시(Simple)

눈에 쉽게 이해하기위해 transition를 사용하였다.

*translate

See the Pen tranform: translate(X, Y) by Char1ey (@char1ey95) on CodePen.

*scale

See the Pen CSS transform: scale(); by Char1ey (@char1ey95) on CodePen.

*rotate

See the Pen css transform:rotate(); by Char1ey (@char1ey95) on CodePen.