css - transform, rotate ?

 

 

transform:scale() - X 또는 Y축으로 확대/ 축소

scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킬 수 있습니다.
사용방법은 아래와 같습니다.

1 2 3

transform:scaleX(x축 비율);          // x축으로 확대, 축소 transform:scaleY(y축 비율);          // y축으로 확대, 축소 transform:scale(x축 비율, y축 비율);  // x축, y축으로 확대, 축소 transform:rotate() - 지정 요소 회전 rotate는 요소를 지정한 각도만큼 회전시킵니다. 회전 각도가 플러스 값일 경우 시계 방향, 마이너스 값일 경우 반시계 방향으로 회전합니다. 사용방법은 아래와 같습니다. 1 2 3 transform:rotateX(Ndeg);  // x축 기준으로 N도 만큼 회전 transform:rotateY(Ndeg);  // y축 기준으로 N도 만큼 회전 transform:rotate(Ndeg);   // N도 만큼 회전 transform:translate() - 지정 요소 X 또는 Y축으로 이동 translate는 요소를 지정한 위치로 X 또는 Y축만큼 이동 시킵니다. 사용방법은 아래와 같습니다. 1 2 3 transform:translateX(10px);        // X축으로 10px 이동 transform:translateY(10px);        // Y축으로 10px 이동 transform:translate(-10px, -10px); // X축으로 -10px, Y축으로 -10px 이동 transform:skew() - 지정 요소 X 또는 Y축으로 기울이기 skew는 요소를 지정한 만큼 X 또는 Y축으로 기울입니다. 사용방법은 아래와 같습니다. 1 2 3 transform:skewX(Ndeg);             // x축으로 N도 만큼 기울이기 transform:skewY(Ndeg);             // y축으로 N도 만큼 기울이기 transform:skew(x축 Ndeg, y축 Ndeg); // x축, y축으로 N도 만큼 기울이기 transform-origin 속성 위의 transform 속성인 scale(), rotate(), translate(), skew()들을 한번씩 연습해 보았다면, 지정 요소의 중심을 기준으로 동작한다는 것을 알 수 있을 것 입니다. 하지만 transform-origin 을 사용하면 지정 요소의 기준점을 변경할 수 있습니다. 사용방법은 아래와 같습니다 1 transform-origin:x축 y축;  // px, 백분율(%), left, center, right 중에서 사용할 수 있습니다.

 

 

 

 

 

ex) 

 

transform: translateY(-50%) rotate(-45deg);

 

 

참고> 

https://www.biew.co.kr/entry/CSS3-Transform-%EC%86%8D%EC%84%B1-scale-rotate-translate-skew-%EC%8B%A4%EB%AC%B4%EC%98%88%EC%A0%9C-%EC%B2%A8%EB%B6%80%ED%8C%8C%EC%9D%BC-%ED%8F%AC%ED%95%A8

CSS3 Transform 속성 : scale(), rotate(), translate(), skew() - 실무예제 첨부파일 포함