css - transform 변형하기

css -  transform 변형

요소의 크기, 회전, 비틀기, 왜곡 등등 포토샵의 기본 기능들을 이용할 수 있다


ㄴ transform의 속성은 한 요소에 2번이상 쓰게되면 나중에 적용된 것 하나만 적용된다

ㄴ 그래서 2개이상의 transform 속성을 하나의 요소에 적용하려면 한 줄에 속성들을 다 써야한다

 ㄴ


transfrom의 property)

scaleX(), scaleY() , scale, rotate,skew, translate, matrix 등







scale(0.5,0.5)

ㄴ n배 만큼 축소, 확대

ㄴ x,y축을 동시에 적용, x,y축을 둘다 0.5배로 적용




 scaleX(0.5)

ㄴ X축을 0.5배로 적용



 scaleY(2)

ㄴ Y축을 2배로 적용




rotate(n)

ㄴ해당 각도만큼 회전

ㄴ양수: 시계방향, 음수 : 반시계방향


rotateY(45deg)

ㄴ 45(degree:각도)도만큼 Y축 방향으로 회전하기



rotateZ(45deg)

ㄴ 45(degree:각도)도만큼 Z축 방향으로 회전하기



skew

ㄴ해당각도만큼 요소를 기울이기

ㄴ transform: skew(15deg, 10deg)





translate(x,y)

ㄴ 요소를 x만큼, y만큼 이동

ㄴ 왼쪽 상단 모서리를 기준으로 움직인다

 

 

ex)

transform : translate(-50%,-50%);

 

ㄴ 요소를 왼쪽 상단 기준점을 기준으로, x축으로 -50% 만큼, y축으로 -50% 만큼 이동한다