프로그래밍/HTML&CSS
transform
하와이블루
2022. 9. 18. 10:00
728x90
transform 속성을 사용하면 물체를 크기나 형태의 위치, 모양 등을 바꿀 수 있다.
대표적인 속성 종류로는 이동(translate), 확대축소(scale), 회전(rotate), 경사(skew)가 있다.
translate()
x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동한다.
| 구분 | 설명 |
| translate(x, y) | (0, 0)를 기준으로 (x, y)만큼 이동한다. |
| translate(x, y, z) | (0, 0, 0)를 기준으로 (x, y, z)만큼이동한다. |
| translateX(x) | x축을 기준으로 x만큼 이동한다. |
| translateY(y) | y축을 기준으로 y만큼 이동한다. |
| translateZ(z) | z축을 기준으로 z만큼 이동한다. |
scale()
웹 요소를 지정한 크기만큼 확대 축소 한다.
| 구분 | 설명 |
| scale(x, y) | (0, 0)를 기준으로 (x, y)만큼 확대한다. |
| scale3d(x, y, z) | (0, 0, 0)를 기준으로 (x, y, z)만큼확대한다. |
| scaleX(x) | x축을 기준으로 x만큼 확대한다. |
| scaleY(y) | y축을 기준으로 y만큼 확대한다. |
| scaleZ(z) | z축을 기준으로 z만큼 확대한다. |
rotate()
각도 혹은 레디안 값을 기입하여 기입한 각도만큼 회전한다.
skew()
지정한 각도만큼 요소를 비틀어 왜곡한다.
<!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>
body{
margin-left: 100px;
}
p{
width: 600px;
padding: 15px;
border: 3px solid rgba(0, 0, 0, 0.500);
}
#trans1{
transform: translate(30px, 30px);
background-color: deeppink;
}
#trans2{
transform: rotate(30deg);
background-color: greenyellow;
}
#trans3{
transform: scale(1.2,1.2);
background-color: orange;
}
#trans4{
transform: skew(-10deg, -15deg);
background-color: gold;
}
</style>
</head>
<body>
<p>original</p>
<p id="trans1">translate</p>
<p id="trans2">rotate</p>
<p id="trans3">scale</p>
<p id="trans4">skew</p>
</body>
</html>
728x90