![[CSS] CSS3에 등장한 신조어 'transform'](/_next/image?url=https%3A%2F%2Fblog.huns.site%2Fimgs%2Fthumbnails%2Fblog%2Fposts%2Ffrontend%2Fstyle%2Fcss.png&w=1200&q=75)
TOC
transform 속성
특정 영역에 여러 가지 변형 효과 적용
가. rotate()
- 선택된 태그의 각도를 평면적으로 조정할 때 사용
transform: rotate(각도);
- 각도 : 0~360deg 중 하나로 지정.
- 각도가 양수면 시계방향, 음수면 반시계 방향
*html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<title>rotate 적용</title>
<link ref="stylesheet" href="CSS문서명.css" />
</head>
<body>
<div id="transform_rotate"></div>
</body>
</html>
*css파일 #transform_rotate {
width: 300px;
height: 300px;
background-color: yellow;
background-image: url("transform_rotate.png");
transform: rotate(45deg);
}
나. scale()
- 선택된 요소의 크기를 비율로 조정할 때 사용
transform: scale(x, y);
- 첫 번째 숫자는 너비(width)비율
- 두 번째 숫자는 높이(height)비율
- 원본 크기를 1로 기준으로 하고 1보다 크면 확대, 작으면 축소
*html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<title>scale 적용</title>
<link ref="stylesheet" href="CSS문서명.css" />
</head>
<body>
<div id="transform_scale"></div>
</body>
</html>
*css파일 #transform_scale {
width: 300px;
height: 300px;
background-color: yellow;
margin: 200px 0 0 200px;
transform: scale(2, 2);
}
다. skew()
- 선택된 태그의 각도를 입체적으로 조정할 때 사용
transform: skew(x, y);
- 첫 번째 숫자는 x축
- 두 번째 숫자는 y축
- x축 값이 양수면 오른쪽, 음수면 왼쪽으로 왜곡
- y축 값이 양수면 아래쪽, 음수면 위쪽으로 왜곡
*html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<title>skew 적용</title>
<link ref="stylesheet" href="CSS문서명.css" />
</head>
<body>
<div id="transform_skew"></div>
</body>
</html>
*css파일 #transform_skew {
width: 300px;
height: 300px;
background-color: yellow;
background-image: url("transform_skew.png");
transform: skew(10deg, 20deg);
margin-left: 100px;
margin-top: 100px;
}
라. translate()
- 선택된 요소를 x축이나 y축으로 이동시킬 때 사용
transform: translate(x, y);
- 첫 번째 숫자는 x축
- 두 번째 숫자는 y축
*html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<title>translate 적용</title>
<link ref="stylesheet" href="CSS문서명.css" />
</head>
<body>
<div id="transform_translate"></div>
</body>
</html>
*css파일 #transform_translate {
width: 300px;
height: 300px;
background-color: yellow;
transform: translate(100px, 200px);
}
