CSS transform 그리기

기본 직선

translate 적용

translate(X, Y)는 X축 Y축으로 이동하는 방법이다.

• %로 접근시 x축 y축 길이의 비율만큼 접근합니다.

scale

scale(x,y) x축 y축으로 확대시키는 방법이다.

rotate

rotate(x deg) x각도만큼 회전

skew

skewX, skewY X,Y축을 기준으로 시점을 반영한다.

다른요소들도 복합적으로 사용할 수 있다.

• transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
• perspective는 관점이다. 3D css를 어디 관점에서 볼지 선택. 값에 따라 볼륨감이 달라진다.