transform
transform 속성
- translate: 이동
- rotate: 회전
- scale: 확대, 축소
- skew: 경사, 비틀기
translate
선택자 {transform: translate(값, 값);}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
p{
width: 600px;
padding: 20px;
border: 3px solid rgba(0, 0, 0, 0.5);
}
#translate{
transform: translate(30px, 50px);
background-color: deeppink;
</style>
</head>
<body>
<h2>transform</h2>
<p>original</p>
<p id="translate">translate</p>
</body>
</html>
x축에서 30px, y축에서 50px 이동
rotate
선택자 {transform: rotate(기울기 값);}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
p{
width: 600px;
padding: 20px;
border: 3px solid rgba(0, 0, 0, 0.5);
}
#rotate{
transform: rotate(60deg);
background-color: gold;
}
</style>
</head>
<body>
<h2>transform</h2>
<p>original</p>
<p id="rotate">rotate</p>
</body>
</html>
60deg 만큼 기울어짐
scale
선택자 {transform: scale(값, 값);}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
p{
width: 600px;
padding: 20px;
border: 3px solid rgba(0, 0, 0, 0.5);
}
#scale{
transform: scale(1.5, 1.2);
background-color: orange;
}
</style>
</head>
<body>
<h2>transform</h2>
<p>original</p>
<p id="scale">scale</p>
</body>
</html>
width 1.5배, height1.2배 확대
skew
선택자 {transform: skew(x축의 기울기 각도, y축의 기울기 각도);}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
p{
width: 600px;
padding: 20px;
border: 3px solid rgba(0, 0, 0, 0.5);
}
#skew {
transform: skew(30deg, 15deg); /* (x축의 기울기 각도, y축의 기울기 각도) */
background-color: yellowgreen;
}
</style>
</head>
<body>
<h2>transform</h2>
<p>original</p>
<p id="skew">skew</p>
</body>
</html>
x축은 30deg, y축은 15deg 적용
