CSS - Transform

Transform 속성을 통해 html 요소를 회전, 확대, 비틀기, 좌표 변경 등이 가능하다.

사용법은 다음과 같다.

<style>
	.transform { /* 클래스가 transfrom인 요소 */
      transform: rotate(30deg); /* 요소를 30도 회전 */
      transform: scale(2,3); /* 요소의 width를 2배, height를 3배 확대 */
      transform: skew(10deg, 30deg); /* x축으로 10도, y축으로 30deg만큼 비틂 */
      transform: translate(10px, 20px); /* x축으로 10px, y축으로 20px 만큼 이동 */
      }
</style>

브라우저 별로 덧붙이는 접두사가 다르다.

<style>
	.transform { /* 클래스가 transfrom인 요소 */
      -webkit-transform: rotate(30deg); /* 요소를 30도 회전 */
      -ms-transform: scale(2,3); /* 요소의 width를 2배, height를 3배 확대 */
      transform: skew(10deg, 30deg); /* x축으로 10도, y축으로 30deg만큼 비틂 */
      transform: translate(10px, 20px); /* x축으로 10px, y축으로 20px 만큼 이동 */
      }
</style>

-webkit-은 크롬과 사파리, -ms-는 익스플로러에서의 지원을 해주는 코드이다.

코드 실행이 잘 안 된다면 브라우저 별로 접두사를 붙여주면 된다.