[CSS] transform:scale

 

참고영상링크

https://www.youtube.com/watch?v=lY5tWhY1Uqk&list=PLuHgQVnccGMDaVaBmkX0qfB45R_bYrV62&index=50

 

transform 은 엘리먼트의 크기(조절), 회전, 비틀기 등을 할 때 사용한다

 

 

 

width:200px; height:200px; 의 도형을 transform의 scale을 이용하여 변형시킬 것이다.

 

(1) scaleX

transform: scaleX(0.5);

scaleX(0.5)를 주면

위와 같은 모양으로 변한다.

즉 x축 방향으로 1/2 크기로 줄어들었다. (width값이 1/2가 되었다.)

 

transform: scaleX(2);

scaleX를 2로 주면 원래 width값의 두 배가 되었다는 것을 알 수 있다.

 

 

 

 

(2)scaleY

transform: scaleY(2);

y축이 2배로 늘어남

transform: scaleY(0.5);

 

y축이 1/2로 변형

 

*두 개 한꺼번에 적용

transform: scaleX(2);
transform: scaleY(2);

scaleX 를 준 상태에서 scaleY를 줘보자.

그러면 scaleX는 적용이 되지 않고  scaleY만 적용이 되는 것을 볼 수 있다.

아래 트랜스폼이 위의 트랜스폼을 덮어씌웠기 때문이다.

둘 다 적용시키기 위해서는

transform: scaleX(2) scaleY(2);

와 같은 형식으로 하나의 transform 안에 써야 한다.

 

 

(3)scale

 scaleX와 scaleY를 따로 쓰지 않고 하나의 scale에다 적용시키기

transform: scale(2);

을 주게 되면

x,y축 방향으로 동시에 2배 늘어남.

 

transform: scale(2,0.5);

x축은 2배, y축은 1/2로 변형된 것을 볼 수 있다.

transform: scale(x축,y축)