HTML과 CSS를 사용하여 플립 카드(카드 뒤집기) 애니메이션을 만들어보겠습니다. 플립 카드는 카드의 앞면과 뒷면을 표시하고 마우스 오버 또는 클릭 시 두 양면을 전환하는 간단한 예제입니다.
1. HTML 파일 생성하기
먼저 HTML 파일을 생성합니다. 이 예제에서는 카드를 만들고 앞면과 뒷면을 구현합니다. 파일을 "index.html"로 저장하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>플립 카드 예제</title>
</head>
<body>
<div class="card">
<div class="card-inner">
<div class="card-front">
<h2>앞면</h2>
</div>
<div class="card-back">
<h2>뒷면</h2>
</div>
</div>
</div>
</body>
</html>
2. CSS 스타일 시트 생성하기
다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장하세요. 스타일 시트에서는 카드의 초기 스타일과 플립 애니메이션을 정의합니다.
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.card {
width: 200px;
height: 300px;
perspective: 1000px;
}
.card-inner {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.5s;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front,
.card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: #3498db;
color: white;
font-size: 24px;
font-weight: bold;
}
.card-back {
transform: rotateY(180deg);
background-color: #e74c3c;
}
3. 실행하기
위의 코드를 모두 작성한 후, HTML 파일을 브라우저에서 열어서 테스트하세요. 마우스를 카드 위로 가져가면 카드가 뒤집히는 플립 애니메이션을 볼 수 있습니다.
4. 결과
마우스로 클릭하면 카드가 바뀝니다.
'HTML 예제' 카테고리의 다른 글
| 레인보우 그래디언트 배경: CSS로 페이지 전체에 레인보우 그래디언트 배경 생성 (0) | 2023.12.05 |
|---|---|
| 실시간 시계: JavaScript로 현재 시간을 실시간으로 표시 (0) | 2023.12.05 |
| 무한 스크롤: 스크롤할 때마다 새로운 내용을 불러와 보여주는 기능 (0) | 2023.12.05 |
| 모달 팝업: 모달 창을 HTML과 CSS로 만들어 팝업 레이어 생성 (0) | 2023.12.05 |
| 스크롤 이벤트: 스크롤 위치에 따라 요소가 나타나거나 사라지는 효과 (0) | 2023.12.05 |
