CSS HTML5/css
[CSS] Transform 속성 쉽게 배우기 – 이동, 확대, 회전, 기울이기
KJY.Design
2025. 6. 20. 13:33
반응형
ransform 속성은 HTML 요소에 회전, 크기 조절, 이동, 기울이기 등의 2D 또는 3D 변형을 적용할 수 있게 해주는 CSS 속성이에요.
쉽게 말해, 요소의 모양이나 위치를 변화시키는 데 사용돼요.
🔧 주요 transform 함수들
함수 이름설명
| translate(x, y) | 요소를 x, y 방향으로 이동 |
| scale(x, y) | 요소의 크기를 x배, y배로 조절 |
| rotate(각도) | 요소를 회전 |
| skew(x각도, y각도) | 요소를 기울임 |
| matrix(...) | 위 모든 변형을 한번에 줄 수 있는 복합 함수 (고급용) |
📌 예시로 보면 더 쉬워요
css
.box { transform: translate(50px, 20px); }
➡️ .box라는 요소가 오른쪽으로 50px, 아래로 20px 이동해요.
css
.box { transform: scale(2, 1.5); }
➡️ 너비는 2배, 높이는 1.5배로 커져요.
css
.box { transform: rotate(45deg); }
➡️ 요소가 시계 방향으로 45도 회전해요.
🎯 꿀팁
- transform은 레이아웃에 영향을 주지 않아요. 눈에만 변화가 보일 뿐, 실제로 공간을 차지하는 영역은 그대로예요.
- transition이나 animation과 함께 쓰면 부드러운 움직임을 만들 수 있어요.
✅ transform 속성 데모 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transform 데모</title>
<style>
body {
font-family: sans-serif;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.container {
display: flex;
align-items: center;
gap: 2rem;
}
.box {
width: 100px;
height: 100px;
background-color: #ffcfcf;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
transition: all 0.4s ease;
border-radius: 10px;
}
.box:hover {
cursor: pointer;
}
.translate:hover {
transform: translate(50px, 20px);
}
.scale:hover {
transform: scale(1.5);
}
.rotate:hover {
transform: rotate(45deg);
}
.skew:hover {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<h2>Transform 데모 - 마우스를 올려보세요!</h2>
<div class="container">
<div class="box translate">이동</div>
<div class="box scale">확대</div>
<div class="box rotate">회전</div>
<div class="box skew">기울기</div>
</div>
</body>
</html>Transform 데모 - 마우스를 올려보세요!
이동
확대
회전
기울기
💡 사용 방법
- 위 코드를 복사해서 .html 파일로 저장하세요 (예: transform-demo.html)
- 크롬이나 엣지 같은 웹 브라우저로 열면 됩니다.
- 마우스를 요소 위에 올려보세요! 각 transform 효과가 적용됩니다.
반응형