CSS Transform

transform

transform은 CSS3에 추가된 기능 중 하나로 2D의 변형을 말한다. 변형이라는 것은 쉽게 말해서 특정 요소를 여러 가지 방법으로 모양을 바꾸는 것을 의미한다. 일반적으로 변형효과는 이벤트와 함께 사용될 때 또는 3D 기능들과 함께 사용될 때 진정한 효과가 나타난다.

transform 속성

rotate ( 회전 효과 )

속성 : rotateX(), rotateY, rotate( x,y )

rotate()는 각도 (degree), 턴(turn)을 이용해서 지정할 수 있다. 회전의 각도가 양수이면 시계 방향으로 회전하고 음수이면 시계 반대방향으로 회전하게 된다. 각도로 값을 줄때는 앞에 어느정도 각을 줄껀지 쓰고 단위는 deg를 주면 되고 턴으로 값을 줄때는 소수점쓰고 단위는 turn을 써주면 된다.

<div></div>

div {
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  margin: 200px 100px;
  transform: rotate(45deg);
}

scale ( 확대/축소 효과 )

속성 : scaleX(), scaleY(), scale( x,y )

scale()은 일정한 수치로 요소의 크기를 조정할 수 있다 예를 들어서 scaleX의 값이 1은 100% 2는 200% 이기때문에 scaleX가 2면 너비 100px인 요소는 200px가 된다. 1이하는 크기를 줄이게 된다. 부모 요소에 적용하면 하위 요소까지 적용된다.

translate ( 이동 효과 )

속성값 : translateX(), translateY(), translate( x,y )

translate()는 x축과 y축 상에서 해당 요소를 본래 위치로부터 움직이게 이동시키는 역할을 한다. 원래의 위치 정보는 남아있다. 단위는 px, %, em 등을 사용한다.

skew ( 비틀기 효과 )

속성 : skewX(), skewY()

skew()는 x축 y축 기준으로 각도를 주어 모양을 변형시킨다. x축은 음수 각도 일 경우 왼쪽으로 양수 각도 일 경우 오른쪽으로 기울어 지고 y축은 음수 각도 일 경우 위로 양수 각도 일 경우 아래로 기울어 진다. 값은 rotate와 마찬가지인 deg를 사용한다.

<div></div>

div {
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  margin: 200px 100px;
  transform: skewY(30deg);
}

출처 - https://webclub.tistory.com/619