변형 효과 /transform, transform-origin 속성

1. transform 속성

• transform 속성을 사용하면 요소에 특정 변형 효과를 지정할 수 있음.
• 속성값에는 변형 효과가 정의된 다양한 함수를 사용함.

translate(x, y)	요소를 현재 위치에서 x(x축)와 y(y축) 만큼 이동함
translateX (n)	요소를 현재 위치에서 n 만큼 x축으로 이동함
translateY (n)	요소를 현재 위치에서 n만큼 y축으로 이동함
scale(x, y)	요소를 x와 y만큼 확대 또는 축소함
scaleX(n)	요소를 n만큼 x축으로 확대 또는 축소
scaleY(n)	요소를 n만큼 y축으로 확대 또는 축소
skew(xdeg, ydeg)	요소를 x축과 y축으로 기울임
skewX(deg)	요소를 deg만큼 x축 방향으로 기울임
skewY(deg)	요소를 deg만큼 y축 방향으로 기울임
rotate(deg)	요소를 deg만큼 회전함

1.1. 2차원 좌표 이동하기

-translate() : x,y축 두 방향으로 동시에 이동함.

-한 방향으로만 이동할 시엔 translateX(), translateY() 을 사용함.

​

1.2. 2차원 확대 또는 축소하기

-scale() 함수 사용.

-만약 숫자가 0보다 크고 1보다 작은(ex)0.3 숫자를 적으면 요소가 축소됨.

1.3. 2차원 기울이기

-skew() 함수 사용.

-음수를 넣으면 양수를 적었을 때와 반대 방향으로 기울어짐.

-한 방향으로만 기울이고 싶다면 skewX() 또는 skewY() 함수를 사용함.

가상 클래스 hover를 사용했음으로,

마우스 커서를 해당 정사각형 요소에 올리면 요소가 기울어지는 것을 확인 할 수 있다.

실행결과 ​

 

​

1.4. 2차원 회전하기

-rotate() 함수 사용.

-양수 값을 넣으면 오른쪽으로 회전 / 음수 값을 넣으면 왼쪽으로 회전함.

이번에도 가상 클래스를 사용하여 마우스 커서를 정사각형 위로 올리면,

지정된 속성 값인 rotate 가 적용되어 정사각형이 회전한다.

양수값의 각도를 입력했으므로 , 오른쪽으로 회전한다.

실행결과 ​

 

​

​

​

2. transform-origin 속성

-rotate 속성에서 기준점, 즉 회전의 중심을 설정하는 속성이다.

-transform-origin:<x축 위치> <y축 위치>;

​

x축	left	왼쪽을 기준점으로 잡음
	center	중앙을 기준점으로
	right	오른쪽을 기준점으로
y축	top	위쪽을 기준점으로
	center	중앙을 기준점으로
	bottom	아래쪽을 기준점으로



가상 클래스 hover을 통해 이번에도 역시 마우스 커서를 올리면 회전하게 설정했고,

왼쪽, 아래를 기준점으로 잡았다.

​

실행결과 ​