HTML, CSS, JavaScript로 3D 큐브 만들기: 완벽 가이드

HTML, CSS, JavaScript로 3D 큐브 만들기: 완벽 가이드

3D 큐브는 웹 개발 기술을 연습하고 시각적으로 매력적인 웹사이트 요소를 만들 수 있는 훌륭한 프로젝트입니다. 이 튜토리얼에서는 HTML, CSS, JavaScript를 사용하여 단계별로 3D 큐브를 만드는 방법을 자세히 설명합니다. 이 가이드를 따르면 3D 변환, 애니메이션 및 사용자 상호 작용에 대한 기본적인 이해를 얻을 수 있습니다.

## 1단계: HTML 구조 설정

먼저 3D 큐브의 기본 HTML 구조를 만듭니다. HTML 파일(예: `index.html`)을 만들고 다음 코드를 추가합니다.

html





3D 큐브



이 코드는 다음과 같은 HTML 구조를 설정합니다.

* `scene`: 3D 환경을 포함하는 컨테이너입니다.
* `cube`: 3D 큐브 자체를 나타내는 컨테이너입니다.
* `face`: 큐브의 각 면을 나타내는 요소입니다. 총 6개의 면(front, back, right, left, top, bottom)이 있습니다.

## 2단계: CSS 스타일링

다음으로 CSS를 사용하여 큐브의 모양과 3D 변환을 정의합니다. CSS 파일(예: `style.css`)을 만들고 다음 코드를 추가합니다.

css
body {
margin: 0;
overflow: hidden; /* 화면 밖으로 나가는 것을 방지 */
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
perspective: 800px; /* 원근감 설정 */
}

.scene {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d; /* 3D 변환 유지 */
}

.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.8s ease-in-out; /* 부드러운 회전 애니메이션 */
}

.cube:hover {
transform: rotateX(45deg) rotateY(45deg); /* 마우스 호버 시 회전 */
}

.face {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.7); /* 반투명 빨간색 */
border: 1px solid black;
box-sizing: border-box; /* padding과 border를 width, height에 포함 */
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: white;
}

/* 각 면의 위치 설정 */
.face.front { transform: translateZ(100px); }
.face.back { transform: rotateY(180deg) translateZ(100px); }
.face.right { transform: rotateY(90deg) translateZ(100px); }
.face.left { transform: rotateY(-90deg) translateZ(100px); }
.face.top { transform: rotateX(90deg) translateZ(100px); }
.face.bottom { transform: rotateX(-90deg) translateZ(100px); }

이 CSS 코드는 다음과 같은 스타일을 적용합니다.

* `body`: 배경색, 가운데 정렬, 원근감 설정
* `scene`: 큐브 컨테이너의 크기 및 위치 설정, 3D 변환 유지
* `cube`: 큐브의 크기 및 위치 설정, 3D 변환 유지, 회전 애니메이션
* `face`: 각 면의 스타일 (크기, 배경색, 테두리, 텍스트 스타일), 절대 위치 설정
* 각 면의 위치: `transform` 속성을 사용하여 각 면을 올바른 위치에 배치합니다. `translateZ`는 면을 앞뒤로 이동시키고, `rotateX` 및 `rotateY`는 면을 회전시킵니다.

## 3단계: JavaScript를 사용한 상호 작용 추가 (선택 사항)

JavaScript를 사용하여 큐브에 상호 작용을 추가할 수 있습니다. 예를 들어, 버튼 클릭 시 큐브를 회전시키거나, 마우스 드래그를 사용하여 큐브를 회전시킬 수 있습니다. JavaScript 파일(예: `script.js`)을 만들고 다음 코드를 추가합니다.

javascript
const cube = document.querySelector(‘.cube’);
let currentX = 0;
let currentY = 0;
let isDragging = false;
let startX;
let startY;

document.addEventListener(‘mousedown’, (e) => {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
});

document.addEventListener(‘mouseup’, () => {
isDragging = false;
});

document.addEventListener(‘mousemove’, (e) => {
if (!isDragging) return;
const deltaX = e.clientX – startX;
const deltaY = e.clientY – startY;
currentX += deltaX * 0.5; // 회전 속도 조절
currentY += deltaY * 0.5;
cube.style.transform = `rotateX(${currentY}deg) rotateY(${currentX}deg)`;
startX = e.clientX;
startY = e.clientY;
});

document.addEventListener(‘mouseleave’, () => {
isDragging = false;
});

// 터치 이벤트 지원 (모바일)
document.addEventListener(‘touchstart’, (e) => {
isDragging = true;
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
});

document.addEventListener(‘touchend’, () => {
isDragging = false;
});

document.addEventListener(‘touchmove’, (e) => {
if (!isDragging) return;
const deltaX = e.touches[0].clientX – startX;
const deltaY = e.touches[0].clientY – startY;
currentX += deltaX * 0.5; // 회전 속도 조절
currentY += deltaY * 0.5;
cube.style.transform = `rotateX(${currentY}deg) rotateY(${currentX}deg)`;
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
});

document.addEventListener(‘touchcancel’, () => {
isDragging = false;
});

// 또는 버튼을 사용하여 회전하는 방법
/*
const rotateButton = document.createElement(‘button’);
rotateButton.textContent = ‘회전’;
document.body.appendChild(rotateButton);

let rotationAngleX = 0;
let rotationAngleY = 0;

rotateButton.addEventListener(‘click’, () => {
rotationAngleX += 10;
rotationAngleY += 10;
cube.style.transform = `rotateX(${rotationAngleX}deg) rotateY(${rotationAngleY}deg)`;
});
*/

이 JavaScript 코드는 다음과 같은 기능을 수행합니다.

* 마우스 드래그로 큐브 회전: 마우스를 클릭하고 드래그하면 큐브가 회전합니다.
* 터치 이벤트 지원: 모바일 장치에서 터치하여 큐브를 회전할 수 있습니다.
* (선택 사항) 버튼 클릭으로 큐브 회전: 버튼을 클릭할 때마다 큐브가 회전합니다.

## 4단계: 각 면에 콘텐츠 추가 (선택 사항)

각 면에 텍스트, 이미지 또는 다른 HTML 요소를 추가하여 큐브를 더욱 흥미롭게 만들 수 있습니다. 예를 들어, 각 면에 숫자를 표시하거나, 이미지를 추가할 수 있습니다.

html

1
2
3
4
5
6

또는 이미지를 추가할 수 있습니다.

html

Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

## 5단계: 추가 기능 및 개선 사항

* 애니메이션 개선: CSS `transition` 속성을 사용하여 큐브의 회전 애니메이션을 더욱 부드럽게 만들 수 있습니다.
* 다양한 상호 작용: 마우스 휠 스크롤 또는 키보드 입력을 사용하여 큐브를 제어할 수 있습니다.
* 반응형 디자인: 다양한 화면 크기에서 큐브가 올바르게 표시되도록 반응형 디자인을 적용할 수 있습니다.
* 3D 라이브러리 사용: Three.js와 같은 3D 라이브러리를 사용하여 더욱 복잡하고 고급스러운 3D 효과를 구현할 수 있습니다.

## 전체 코드 예제

**index.html:**

html





3D 큐브

1
2
3
4
5
6



**style.css:**

css
body {
margin: 0;
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
perspective: 800px;
}

.scene {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
}

.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.8s ease-in-out;
}

.cube:hover {
transform: rotateX(45deg) rotateY(45deg);
}

.face {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.7);
border: 1px solid black;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: white;
}

.face.front { transform: translateZ(100px); }
.face.back { transform: rotateY(180deg) translateZ(100px); }
.face.right { transform: rotateY(90deg) translateZ(100px); }
.face.left { transform: rotateY(-90deg) translateZ(100px); }
.face.top { transform: rotateX(90deg) translateZ(100px); }
.face.bottom { transform: rotateX(-90deg) translateZ(100px); }

**script.js:**

javascript
const cube = document.querySelector(‘.cube’);
let currentX = 0;
let currentY = 0;
let isDragging = false;
let startX;
let startY;

document.addEventListener(‘mousedown’, (e) => {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
});

document.addEventListener(‘mouseup’, () => {
isDragging = false;
});

document.addEventListener(‘mousemove’, (e) => {
if (!isDragging) return;
const deltaX = e.clientX – startX;
const deltaY = e.clientY – startY;
currentX += deltaX * 0.5;
currentY += deltaY * 0.5;
cube.style.transform = `rotateX(${currentY}deg) rotateY(${currentX}deg)`;
startX = e.clientX;
startY = e.clientY;
});

document.addEventListener(‘mouseleave’, () => {
isDragging = false;
});

document.addEventListener(‘touchstart’, (e) => {
isDragging = true;
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
});

document.addEventListener(‘touchend’, () => {
isDragging = false;
});

document.addEventListener(‘touchmove’, (e) => {
if (!isDragging) return;
const deltaX = e.touches[0].clientX – startX;
const deltaY = e.touches[0].clientY – startY;
currentX += deltaX * 0.5;
currentY += deltaY * 0.5;
cube.style.transform = `rotateX(${currentY}deg) rotateY(${currentX}deg)`;
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
});

document.addEventListener(‘touchcancel’, () => {
isDragging = false;
});

## 결론

이 튜토리얼에서는 HTML, CSS, JavaScript를 사용하여 3D 큐브를 만드는 방법을 배웠습니다. 이 지식을 바탕으로 다양한 3D 효과와 애니메이션을 웹사이트에 추가하여 더욱 매력적인 사용자 경험을 제공할 수 있습니다. 3D 큐브 만들기는 웹 개발 기술을 향상시키는 데 도움이 되며, 창의적인 아이디어를 구현하는 데 유용한 도구가 될 것입니다.

이 튜토리얼이 여러분에게 도움이 되었기를 바랍니다! 궁금한 점이나 개선할 점이 있다면 언제든지 댓글을 남겨주세요.

0 0 votes
Article Rating
Subscribe
Notify of
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments