css transform

transform

이름에서 알 수 있듯이 형태를 변환하는 동작을 한다.

보통 기준점이 왼쪽 상단인 것에 비해 트랜스폼은 기준점을 요소의 중앙으로 잡는다.

 transform-origin를 사용해서 기준점 위치를 변경할 수 있다. 속성: left(0%), top(0%), center(50%), right(100%), bottom(100%) (키워드 대신 괄호 안의 숫자값도 넣을 수 있음)

ex) transform-origin: left top; 또는 transform-origin: 0% 0%;  이렇게 하면 왼쪽 상단이 기준이 됨.

요소 형태 변화가 다른 요소들의 위치나 형태에 영향을 주지 않는다.  cf) width와 height에 값을 줘서 형태에 변화를 주면 변한 만큼 주변 요소들의 위치에도 영향을 미치는 반면, transform으로 형태에변화를 줬을 때는 주변에 영향을 미치지 않는다.

See the Pen MWaxOEW by volt-nuna (@ddonni0426) on CodePen.

<보유 기능>

1.scale(X) - X배 만큼 확대

2.skew(Xdeg) - Xdeg만큼 수평으로 비틀기 수직으로 비틀고 싶으면 skewY를 사용하면됨 X값을 음수로 주면 반대 모양으로 비틀어짐

3.rotate(Xdeg) - Xdeg만큼 시계방향으로 회전한다. (deg 꼭 붙혀줘야함. 만약 음수를 주었을 경우 반시계 방향으로 회전)

4.translate(Xpx, Ypx) x축으로 Xpx, y축으로 Ypx만큼 이동한다. 단위는 꼭 px아니어도 된다.

5.translateX(), translateY()를 이용해서 X,Y 따로 지정할 수도 있다. 역시나 음수는 기본동작에서 반대방향

 

See the Pen JjYzOOE by volt-nuna (@ddonni0426) on CodePen.