3D 회전 메뉴를 만들기 위해 다음과 같은 단계를 따라갈 수 있습니다. 이 예제에서는 HTML, CSS, JavaScript를 사용하여 메뉴를 만들고 3D 회전 효과를 적용할 것입니다.
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>3D 회전 메뉴</title>
</head>
<body>
<div class="menu">
<div class="menu-item">메뉴 항목 1</div>
<div class="menu-item">메뉴 항목 2</div>
<div class="menu-item">메뉴 항목 3</div>
<!-- 다른 메뉴 항목들을 추가하세요 -->
</div>
<script src="script.js"></script>
</body>
</html>
CSS 스타일링:
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.menu {
display: flex;
gap: 20px;
}
.menu-item {
width: 150px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
cursor: pointer;
transition: transform 0.3s ease-in-out;
transform-style: preserve-3d;
}
.menu-item:hover {
transform: rotateY(180deg);
}
JavaScript 코드 (script.js):
// script.js
const menuItems = document.querySelectorAll(".menu-item");
menuItems.forEach((item, index) => {
item.addEventListener("click", () => {
alert(`메뉴 항목 ${index + 1}이(가) 클릭되었습니다.`);
});
});
이제 HTML, CSS, JavaScript 파일을 생성하고 코드를 복사하여 각 파일에 붙여넣은 후 웹 브라우저에서 실행합니다. 메뉴 항목을 클릭하면 3D 회전 효과와 함께 각 항목에 대한 알림이 표시됩니다.
'HTML 예제' 카테고리의 다른 글
| 날씨 앱 디자인: 실제 날씨 정보를 가져와 표시하는 날씨 앱 스타일 페이지 (0) | 2023.12.06 |
|---|---|
| 나만의 스티커 만들기: HTML5 <canvas>로 나만의 스티커 생성 (0) | 2023.12.06 |
| 트위터 피드 스타일링: 트위터 피드를 모바일 앱처럼 스타일링 (0) | 2023.12.06 |
| 동적 테이블 정렬: JavaScript를 사용하여 동적으로 테이블 열 정렬 (0) | 2023.12.06 |
| 깜빡이는 눈동자: CSS 애니메이션으로 눈동자 깜빡임 효과 (0) | 2023.12.06 |
