[CSS] transform(translate, scale, rotate, skew)

transform

---

이 속성은 이미 만들어진 태그, 혹은 이미지를 늘리거나 회전시킬 때 사용한다.

 

 

 

 

1. translate (이동)

요소를 각각 x축과 y축으로 지정 한 값 만큼 이동시킨다.

 

.box:hover {
	transform: translate(100px, 50px);
}

px대신 %도 가능하며 위 코드는 평소에는 원래 위치해있고, 마우스 오버시 X 100px, Y 50px씩 이동한다.

 

 

 

 

2. scale (늘리거나 줄이거나)

요소의 크기를 변경하는 태그이며 (좌우, 상하)로 늘어난다.

translate과 마찬가지로 scale(X, Y)로 입력해 사용하며 단위는 '기존 사이즈의 몇 배' 이므로 width, height의 속성과는 다르다.

.box:hover {
	transform: scale(2, 1.5);
}

 

 

 

3. rotate (회전)

요소를 회전시키는 태그이다. 각도를 나타내는 단위로 deg를 쓴다.

.box:hover {
	transform: rotate(30deg);
}

 

 

 

4. skew (왜곡)

요소를 왜곡시키는 태그이다. skew(X, Y)와 같이 사용하며 단위는 rotate와 같이 deg를 쓴다.

.box:hover {
	transform: skew(30deg, 30deg);
}