[CSS] transform

zhunhe·2021년 10월 4일
0

개요

transform은 요소에 회전, 크기 조절, 이동 효과를 부여할 수 있는 속성입니다. 비슷한 속성 및 함수로 transition, translate()가 있습니다.
원래 형태가 있는 요소를 transform이라는 속성을 이용해서 크게, 작게, 회전, 이동시킬 수 있습니다.
position으로 top, left로 이동시킬 수 있으나 레이아웃 자체가 변경됩니다만 transform을 가지고 요소를 변화시키면 기존 레이아웃은 유지하면서 변경됩니다.

크기 - scale

scale은 요소의 크기를 변경할 수 있는 속성입니다.
웹페이지에서 직교좌표계는 수학적으로 쓰이는 일반적인 좌표계와는 다르게 좌측상단이 (0,0)으로 시작합니다.
scale이 받을 수 있는 자료형은 number로 음수, 0, 양수 범위에 있는 실수값을 받을 수 있습니다.

scale()

  • 2D로 크기조절을 할 수 있는 함수입니다. (3D로 크기조절을 할 수 있는 scale3d()라는 함수가 따로 존재합니다.)
<img id="bolt" src="bolt.webp">
#bolt {
  width: 400px;
   /* 가로, 세로 크기 50%로 변경! */
   /* width 400px는 그대로 유지! */
  transform: scale(0.5);
  
  /* 가로 크기 150%, 세로 크기 50%로 변경 */
  transform: scale(1.5, 0.5);
}

scaleX()

  • 가로의 길이만 변경해주는 속성입니다.
#bolt {
  width: 400px;
  transform: scaleX(0.5);
}

scaleY()

  • 세로의 길이만 변경해주는 속성입니다.
#bolt {
  width: 400px;
  transform: scaleY(0.5);
}

회전 - rotate

rotate()은 요소를 회전시킬 수 있는 속성으로 angle이라는 자료형을 받고 값을 하나만 받습니다.

angle 자료형

deg, turn을 주로 사용합니다.
deg: 45°와 같은 각도를 말하며 45deg로 표현합니다.
turn: 몇바퀴인지를 나타내주며 1turn인 경우 한바퀴를 나타내고 0.25turn은 0.25바퀴를 나타냅니다.

이동 - translate

tranlate은 값을 하나 혹은 두개 받을 수 있습니다.
값을 하나만 입력할 경우 x축으로만 이동하게 됩니다.

/* Single <length-percentage> values */
/* translate(200px, 0px);과 같습니다. */
transform: translate(200px);
transform: translate(50%);

/* Double <length-percentage> values */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

기울이기 - skew

  • skew는 요소를 기울일 수 있는(비틀 수 있는) 속성으로 angle이라는 자료형을 받습니다.

기준점 - transform-origin

  • transform-origin은 요소의 기준점을 변경해주는 속성입니다. 기본값은 center(50%)입니다.

0개의 댓글