HTML, CSS
CSS : Transform(transform 속성)
ThatHomr
2023. 3. 14. 12:12
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>CSS - transform property</title>
<link rel="stylesheet" href="../../css/reset.css">
<style>
#container > div {
float: left;
width: 200px;
height: 200px;
margin: 50px;
border: 5px solid black;
font-size: 2em;
font-weight: bold;
text-align: center;
line-height: 200px;
}
#container > div > div {
width: 100%;
height: 100%;
background-color: yellowgreen;
}
/* 이동 */
#translate {
transform: translate(30px, 50px);
transform: translate(-50%, -50%);
/* 백분율 기준 = 해당 요소의 크기 */
}
/* 회전 */
#rotate {
/* 단위 : deg */
transform: rotate(30deg);
transform: rotate(90deg);
transform: rotate(-90deg);
}
/* 배율(확대/축소) */
#scale {
transform: scale(1);
transform: scale(1.5); /* 1.5배 */
transform: scale(0.5); /* 0.5배 */
/* 변환 중심을 지정하는 속성 */
transform-origin: right bottom;
}
/* 기울기 */
#skew {
transform: skewX(30deg);
transform: skewY(30deg);
}
/* 변환 함수는 여러 개를 작성할 수 있으면 */
/* 작성된 순서에 따라 최종 형태가 달라질 수 있다. */
/* → 작성된 함수부터 차례대로 적용 */
#translate-rotate {
font-size: 0.7em;
transform: translateX(150px);
transform: translateX(150px) rotate(60deg);
}
#rotate-translate {
font-size: 0.7em;
transform: rotate(60deg);
transform: rotate(60deg) translateX(150px);
/* 회전할 때 요소의 축도 같이 회전하게 된다. */
}
</style>
</head>
<body>
<div id="container">
<div><div>Normal</div></div>
<div><div id="translate">translate</div></div>
<div><div id="rotate">rotate</div></div>
<div><div id="scale">scale</div></div>
<div><div id="skew">skew</div></div>
<div><div id="translate-rotate">translate-rotate</div></div>
<div><div id="rotate-translate">rotate-translate</div></div>
</div>
</body>
</html>