728x90
300x250
SMALL
transform
CSS의 transform 속성은 요소에 회전, 크기 변경, 이동, 기울이기 등의 2D 및 3D 변현 효과를 줄 수 있다.
일반적으로 hover나 active상태에서 자주 사용된다.
주요 함수
- translateX(px), translateY(px) : 요소를 수평 또는 수직으로 이동
- scale(1.1) : 요소를 확대/축소
- rotate(45deg) : 요소를 회전
- skewX(deg), skewY(deg) : 요소를 기울이기
예제1 : 버튼 확대 효과
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
.btn {
padding: 12px 24px;
background: #9b59b6;
color: white;
border: none;
border-radius: 5px;
transition: transform 0.2s ease;
}
.btn:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<button class="btn">확대되는 버튼</button>
</body>
</html>
예제2 : 카드 흔들기 효과
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
.card {
width: 200px;
height: 120px;
background-color: #f39c12;
border-radius: 10px;
transition: transform 0.2s;
}
.card:hover {
transform: rotate(-3deg);
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>
728x90
반응형
LIST
'Front-end > 애니메이션' 카테고리의 다른 글
| 다양한 의사 클래스(:focus, :active, :checked) (0) | 2025.05.18 |
|---|---|
| animation @keyframes 으로 반복되는 움직임 만들기 (0) | 2025.05.15 |
| transition으로 부드러운 애니메이션 만들기 (0) | 2025.05.12 |
| css 애니메이션 기초 : hover - 버튼, 링크, 카드에 인터랙션 주기 (0) | 2025.05.11 |
| 숫자 변경 애니메이션 -비 (0) | 2025.05.10 |
댓글