HTML, CSS - Transform 속성

Transform

웹사이트의 특정 영역에서 어떤 오브젝트의 각도를 튼다거나, 크기를 조절한다거나, 위치를 변경할 때 사용하는 속성. transform에는 다양한 속성값들이 있음.

 

rotate, scale

<style>
  .transition {
    transform: rotate(45deg);   /* 회전 */
    transform: scale(2, 3);     /* 확대 축소 */
  }
</style>

rotate는 입력한 각도만큼 특정 오브젝트에 회전 효과를 줄 때 사용함. 여기서 얘기하는 회전이란, 평면적인 회전을 의미함. 위에서는 45deg로 양수 형태로 값이 들어가있는데, -45deg 처럼 음수 형태로도 입력 가능함.

 

scale은 오브젝트를 확대, 축소시킬 때 사용함. 예시 scale(2, 3)에서 괄호 안의 숫자는 비율을 의미. 2는 width값을 2배, 3은 height값을 3배 확대하겠다는 것. 축소시키고 싶을 때는, 0.5 처럼 소수점을 사용해서 입력하면 됨. scale에서 기준점은, 기존 오브젝트의 정가운데임. 

 

 

skew, translate

<style>
  .transition {
    transform: skew(10deg, 20deg);    /* 각도 변경 */
    transform: translate(100px, 200px);    / * 위치 변경 */
  }
</style>

skew는 입체적으로 각도를 비틀 때 사용함. rotate와 마찬가지로 deg라는 각도 단위를 사용. 앞의 숫자는 x축, 뒤의 숫자는 y축을 의미. 위에선 skew(10deg, 20deg)니까 x축으로 10deg 만큼, y축으로 20deg 만큼 비틀겠다는 뜻. 마찬가지로 마이너스 값도 넣을 수 있음.

 

translate는 선택한 오브젝트의 위치를 바꾸고 싶을 때 사용함. 마찬가지로 첫번째 숫자는 x축, 두번째 숫자는 y축을 의미해서 숫자만큼 좌표값을 움직이겠다는 의미. 

 

 

+ 참고로 여러 개의 transform 속성값들을 입력하게 되면, 덮어씌우고 덮어씌워져서 나중에 작성한 transform의 속성만 적용됨.

 

 

prefix 접두사

transform을 사용할 때 기억해야 될 게 prefix 접두사인데, transform 자체가 CSS3의 최신 언어이기 때문에 익스플로러 하위 버전에서는 사용할 수 없음. 그런데, 아래처럼 webkit, moz, ms, o라는 prefix를 앞에다가 달게 되면, 각 브라우저의 하위 버전에서도 사용할 수 있게끔 동작시킴. 

<style>
  .transition {
    -webkit-transform: translate(100px, 200px);   /* 크롬, 사파리 */
    -moz-transform: translate(100px, 200px);      /* 파이어폭스 */
    -ms-transform: translate(100px, 200px);       /* 익스플로러 9.0 */
    -o-transform: translate(100px, 200px);        /* 오페라 */
  }
</style>

하위 버전까지 고려해서 transform의 속성들이 적용되면 좋겠다 한다면 prefix를 앞에다가 각각 붙여주면 좋음.