CSS transform 에 대해 정리해보았다.
scale, rotate, translate, skew, tranform-origin 을 살펴본다.

---

🦋 transform

transform : 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.
아무것도 적용되지 않은 기본값은 none 이다.

• 요소의 위치는 그대로 둔 채 원래의 형태를 변형한다.

• Layout(레이아웃) 배치에 영향을 주는 것은 아니다!

• 키워드나 직접적인 값을 사용해서 효과를 주지 않고, 하나 이상의 함수를 사용하여 적용한다.

• 여러 함수를 spacing(공백) 으로 구분해서 적용할 수 있다.
  --> 요소에 변형을 함수들의 오른쪽부터 왼쪽으로 하나씩 순서대로 적용한다.

Q) 함수라는게 뭔가요? 🤔

A) 변형은 <transform-function> 을 통해 이루어집니다.
요소의 변형에 영향을 주는 함수죠.

• 변형 함수는 2D 또는 3D 공간 내에서 요소를 회전하고, 크기를 바꾸고, 왜곡하고, 이동할 수 있습니다.
• 변형 함수의 종류에는 크게 행렬 변형, 원근, 회전, 크기 조절, 기울이기, 이동 이 있습니다.
• 왼쪽 상단 (0, 0) 좌표를 기준으로 놓고 봤을 때 양의 값은 원점의 오른쪽과 아래로 진행하고, 음의 값은 왼쪽과 위로 진행합니다.
• 컴퓨터 그래픽에서 x 축은 그대로이지만 y 축은 우리가 배운 수학과 반대방향인 것을 명심하세요!
  
  🦊 MDN Link - <transform-function>

🦊 MDN Link - transform

---

🦋 scale, scaleX(), scaleY() - 크기 조절

scale() : 2D로 크기를 조절하는 transform 함수이다.

• scale(sx) 혹은 scale(sx, sy) 형식으로 사용한다.
  --> sx, sy 는 <number> 자료형이다.

• 두 변수 (sx, sy) 중 하나만 입력하면 가로와 세로가 같은 비율로 변경된다.

• width, height 속성으로 크기를 조절하는것과는 다른 개념이다.
  --> Layout에 영향을 주지 않고, 위치와 공간은 원래대로 유지한다.

• scaleX() 와 scaleY() 는 하나의 변수만 갖는다.
  --> 각각 가로와 세로 크기만 조절한다.

Example

#bob_ross{
  width: 400px;

  transform: scale(0.5);
}

🦊 MDN Link - scale()

---

🦋 rotate() - 회전

rotate : 회전을 나타내는 transform 함수이다.

• rotate(a) 형식으로 사용한다.
  --> a 는 <angle> 자료형이다.

• <angle> 단위에는 deg, grad, rad, turn 이 있다.
  --> rotate() 함수에는 숫자+단위 의 변수를 사용한다.

• 양수는 시계방향, 음수는 반시계방향으로 회전시킨다.

Example

#bob_ross{
  width: 400px;

  transform: rotate(45deg);
}

🦊 MDN Link - rotate()

---

🦋 translate() - 이동

translate() : 이동을 담당하는 transform 함수이다.

• 왼쪽 상단 (0, 0) 좌표를 기준으로 요소를 이동시킬 수 있다.
  --> 단순히 보이는 상태만 이동시키는 것. 절대 Layout 상에서 이동시키는게 아님을 주의하자!

• translate(<length-percentage> , <length-percentage>?) 형식으로 사용한다.
  --> 순서대로 (x축, y축) 이다.

• <length> 혹은 <percentage> 값이 사용 가능하다.
  --> % 값은 부모나 viewport 기준이 아닌 요소의 길이 기준이다.

• 하나의 변수만 입력받을 경우 x축으로만 이동한다.
  --> x, y 가 모두 적용되었던 scale() 함수와는 다르다!

• 변수들의 양수값은 각각 (오른쪽, 아래쪽) 이다.

Example

#bob_ross {
  transform: translate(100px, 30%);
}

🦊 MDN Link - translate()

---

🦋 skew() - 기울이기

skew() : 기울임(왜곡) 변형을 나타내는 transform 함수이다.

• rotate 와 마찬가지로 <angle> 자료형을 값으로 사용한다.

• skew(ax) 혹은 skew(ax, ay) 형식으로 사용한다.
  --> 변수가 하나일 경우 x축으로만 기울인다.

Example

#bob_ross {
  transform: skew(20deg, 20deg);
}

🦊 MDN Link - skew()

---

🦋 transform-origin - 기준점 변경 속성

transform-origin : 변형되는 기준점을 설정하는 프로퍼티(속성) 이다.

• transform 과는 별도로 사용되는 속성이다. = 함수가 아니다!

• 기본값은 center 이다.
  --> width 의 절반, height 의 절반이다.

• top, left, right, bottom 의 키워드로 지정할 수도 있고,
  별도의 지정값을 사용하여 좌표를 설정할 수도 있다.

Example

아래 예제는 각각

1. 기본 상태
2. rotate() 만 적용한 상태
3. rotate() 와 transform-origin 를 함께 적용한 상태

를 보여준다.
주황색 프레임은 Original 일때의 이미지 위치이다.

Original	transform: rotate()	+ transform-origin
#bob_ross { width: 400px; margin: 100px; }	#bob_ross { width: 400px; margin: 100px; transform: rotate(-45deg); }	#bob_ross { width: 400px; margin: 100px; transform: rotate(-45deg); transform-origin: top right; }

🦊 MDN Link - transform-origin