티스토리 뷰

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);
}

'Client > CSS' 카테고리의 다른 글

[CSS] flex 속성 정리 (flex-basis, flex-grow, flex-shrink)  (0) 2024.03.12
[CSS] active와 focus의 차이  (0) 2023.10.20
[CSS] overflow  (0) 2023.07.27
[CSS] box-sizing 속성  (0) 2022.06.12
[CSS] position (relative, absolute)  (0) 2022.06.03
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/02   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함