웹 요소를 이동시키는 translate() 함수
트렌스레이트
transition: 1s;
부드럽게 움직이게 한다
(0.6초 정도 추천)
#movex:hover {
transform: translateX(50px);
마우스를 올리면 x좌표로 50px이동
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transform - translate</title>
<style>
.container {
width:800px;
height:200px;
margin:20px auto;
}
.origin {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
margin: 40px;
}
.origin > div {
width:100px;
height:100px;
background-color:orange;
transition: 1s; /* 부드럽게 움직이게 하려면 */
}
/* Do it! 마우스 오버하면 사각형 이동하기 */
#movex:hover {
transform: translateX(50px); /* x축으로(가로) 50px 이동 */
}
#movey:hover {
transform: translateY(20px); /* y축으로(세로) 20px 이동 */
}
#movexy:hover {
transform: translate(10px, 20px); /* x축으로(가로) 10px, y축으로(세로) 20px 이동 */
}
</style>
</head>
<body>
<div class="container">
<div class="origin">
<div id="movex"></div>
</div>
<div class="origin">
<div id="movey"></div>
</div>
<div class="origin">
<div id="movexy"></div>
</div>
</div>
</body>
</html>요소를 확대 축소하는 scale() 함수
스케일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transform:scale</title>
<style>
#container {
width: 600px;
margin: 20px auto;
}
.origin {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
margin: 40px;
}
.origin>div {
width: 100px;
height: 100px;
background-color: orange;
}
/* Do it! scale 함수로 확대,축소하기 */
#scalex:hover {
transform: scaleX(2);
/* x축으로(가로) 2배 확대 */
}
#scaley:hover {
transform: scaleY(1.5);
/* y축으로(세로) 1.5배 확대 */
}
#scale:hover {
transform: scale(0.7);
/* x, y축으로(가로, 세로) 0.7배 확대 */
}
</style>
</head>
<body>
<div id="container">
<div class="origin">
<div id="scalex"></div>
</div>
<div class="origin">
<div id="scaley"></div>
</div>
<div class="origin">
<div id="scale"></div>
</div>
</div>
</body>
</html>요소를 회전시키는 rotate() 함수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transform:rotate</title>
<style>
#container{
width:800px;
margin:20px auto;
}
.origin {
float: left;
margin: 40px;
border: 1px solid #ccc;
}
/* Do it! rotate 함수로 회전하기 */
#rotate1:hover {
transform: rotate(40deg); /* 시계 방향(오른쪽)으로 40도 회전 */
}
#rotate2:hover {
transform: rotate(-40deg); /* 시계 반대 방향(왼쪽)으로 40도 회전 */
}
</style>
</head>
<body>
<div id="container">
<div class="origin" id="rotate1">
<img src="images/home.png" alt="">
</div>
<div class="origin" id="rotate2">
<img src="images/home.png" alt="">
</div>
</body>
</html>트랜지션의 속성을 한꺼번에 표기하는 transition
원본 요소를 디자인
원본에 수도 클래스(호버 클래스) 생성
호버 클래스 내부에 변해야될 상태 디자인
원본에 트렌지션 부여 (호버 클래스에 부여도 가능은 함, 대신 들어갈때만 적용됨)
ease-in값을 줬으면 체감 가능한 시간을 충분히 줘야한다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transition</title>
<style>
.box {
margin:50px auto;
width: 100px;
height: 100px;
background-color: #fb5;
border: 1px solid #222;
/* Do it! 모든 대상에 2초 동안 ease-in 속도 곡선을 적용하는 트랜지션 */
transition: 2s ease-in; /* 대상: all, 시간:2초, 함수:ease-in */
}
.box:hover { /* 여기에 있는 속성이 모두 트랜지션 대상 */
width: 200px;
height: 200px;
background-color: #f50;
transform: rotate(270deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>실습
마우스를 올리면 상품 설명글이 나오게
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS3 애니메이션</title>
<link rel="stylesheet" href="css/product.css">
</head>
<body>
<div id="container">
<h1>신상품 목록</h1>
<ul class="prod-list">
<li>
<img src="images/prod1.jpg">
<div class="caption">
<h2>상품 1</h2>
<p>상품 1 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
<li>
<img src="images/prod2.jpg">
<div class="caption">
<h2>상품 2</h2>
<p>상품 2 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
<li>
<img src="images/prod3.jpg">
<div class="caption">
<h2>상품 3</h2>
<p>상품 3 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
</ul>
</div>
</body>
</html>
CSS
#container {
max-width: 1000px;
margin: 20px auto;
width: 100%;
}
h1 {
text-align: center;
}
.prod-list {
list-style: none;
padding: 0;
display: flex; /* Flexbox를 사용하도록 설정 */
flex-wrap: wrap; /* 항목이 컨테이너 너비를 초과하면 다음 줄로 이동 */
justify-content: space-around; /* 항목 사이의 여백을 균등하게 분배 */
}
.prod-list li {
padding: 0;
margin: 10px;
overflow: hidden;
flex-basis: calc(33.333% - 20px); /* 3개의 항목을 한 줄에 표시, 항목 사이의 마진 고려 */
position: relative;
}
.prod-list img {
width: 100%; /* 이미지가 항목의 너비에 맞게 조정 */
height: auto; /* 이미지 비율 유지 */
z-index: 5;
}
.prod-list .caption {
position: absolute;
top: 200px;
width: 100%; /* 캡션 너비를 항목 너비와 동일하게 조정 */
height: 200px;
padding-top: 20px;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.6s ease-in-out;
z-index: 10;
}
.prod-list li:hover .caption {
opacity: 1;
transform: translateY(-200px);
}
.prod-list .caption h2, .prod-list .caption p {
color: #fff;
text-align: center;
}'코딩 > CSS 실습' 카테고리의 다른 글
| [코드 연습장]CSS: 가상 요소와 다양한 CSS 함수(수학, 필터) 활용 (0) | 2026.03.26 |
|---|---|
| [코드 연습장]CSS: 다양한 고급 선택자를 활용한 폼(Form)과 리스트 디자인 (0) | 2026.03.25 |
| [코드 연습장] CSS: Flexbox 기초 정렬 실습 및 반응형 프로필 카드 만들기 (0) | 2026.03.23 |
| [코드 연습장]CSS: 상대 단위(em/rem)와 유동적 이미지(Fluid Image) 기초 실습 (0) | 2026.03.23 |
| [코드 연습장] CSS 배경 꾸미기 (background-size, linear-gradient 등) (0) | 2026.03.20 |