transform
포토샵에서 command+t처럼 transform은 물체를 회전시키거나 크기를 키우거나 등등 하는거임! 그럼 css에서는 어떻게 사용하는지 고고
transform: translate()
요소를 이동시킬때 사용함
translateX, translateY 등 X(가로),Y(세로)축에 각각 값을 지정해줌,
translate(x축 값,y축 값)을 이용하여 동시에 사용이 가능함
transform: scale()
요소의 크기를 조절할 때 사용함
transform: scale(2)는 요소를 현재 크기의 2배로 키울 수 있다
transform: rotate()
요소를 회전시킴
회전의 기준점은 transform-origin: top left; 등 으로 변경 가능.
transform: rotate(45deg)는 45도 회전시킨다.transform-origin: x축: left / enter / right / 백분율 / 길이 , y축: top / center / bottom / 백분율 / 길이
transform: rotate(45deg) 시계방향으로 돌아감
위에 세개를 동시에도 쓸수있음
ransform: translate(10px,20px) scale(2) rotate(90deg);
하이