소개
이 랩에서는 HTML 과 CSS 를 사용하여 3D 회전 큐브를 만들 것입니다. 큐브는 여섯 개의 고유한 색상의 면을 가지며, CSS 3D 변환 및 애니메이션의 강력함을 보여주기 위해 3D 공간에서 지속적으로 회전합니다. 이 프로젝트는 CSS 3D 기능을 훌륭하게 소개하며, JavaScript 없이도 요소가 3 차원 공간에서 어떻게 배치되고 애니메이션될 수 있는지 시각화할 수 있게 해줍니다.
HTML 구조 생성
3D 큐브는 앞면, 뒷면, 왼쪽, 오른쪽, 위쪽, 아래쪽의 여섯 면으로 구성됩니다. 이러한 면들을 3D 공간에 배치할 수 있도록 하는 HTML 구조를 만들어야 합니다.
프로젝트 디렉토리에서 index.html 파일을 열고 큐브 구조를 생성하는 데 필요한 HTML 코드를 추가해 보겠습니다.
- 왼쪽의 파일 탐색기 패널로 이동하여 WebIDE 를 엽니다.
- 편집기에서
index.html파일을 열려면 클릭합니다. - 다음 HTML 코드를 복사하여 파일에 붙여넣습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D Rotating Cube</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face right">Right</div>
<div class="face left">Left</div>
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>
</div>
</body>
</html>
이 HTML 구조를 이해해 봅시다.
- 메타데이터와 제목을 포함하는 표준 HTML5 문서 구조로 시작합니다.
- 다음 단계에서 만들 CSS 파일 (
style.css) 에 연결합니다. - body 에서 큐브를 페이지 중앙에 배치할 컨테이너
div를 만듭니다. - 컨테이너 내부에는 3D 객체가 될
cubediv 가 있습니다. - 큐브 내에서 각 면에
face클래스와 위치를 식별하는 추가 클래스 (front, back 등) 가 있는 여섯 개의 div 를 정의합니다. - 각 면에는 해당 위치를 식별하는 데 도움이 되는 텍스트가 포함되어 있습니다.
현재 진행 상황을 확인하려면 WebIDE 하단에서 "Go Live" 버튼을 찾아 클릭하십시오. 그러면 로컬 웹 서버가 시작되고 페이지를 표시하는 브라우저 탭이 열립니다. 현재는 아직 스타일을 적용하지 않았으므로 각 면의 텍스트가 서로 위에 쌓여 있는 것만 볼 수 있습니다.
다음 단계에서는 CSS 를 사용하여 이러한 div 를 3D 큐브의 면으로 변환합니다.
기본 CSS 스타일 생성
이제 HTML 구조가 있으므로 3D 큐브의 기반을 만들기 위해 스타일을 지정해야 합니다. 이 단계에서는 큐브의 컨테이너를 만들고 큐브 면의 스타일을 지정하는 데 필요한 CSS 를 추가합니다.
- WebIDE 에서 파일 탐색기 패널의
style.css파일을 클릭하여 엽니다. - 다음 CSS 코드를 복사하여 파일에 붙여넣습니다.
/* Basic reset and page styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Container styling with perspective */
.container {
perspective: 1000px;
/* The perspective property defines how far the object is from the viewer */
/* A smaller value creates a more intense 3D effect */
}
/* Cube container styles */
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
/* This tells the browser that child elements should be positioned in 3D space */
}
/* Common styles for all faces */
.face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
opacity: 0.9;
}
방금 추가한 CSS 를 이해해 봅시다.
- 먼저, 여백과 안쪽 여백을 0 으로 설정하여 브라우저 간에 일관된 스타일을 보장하기 위해 기본 CSS 재설정을 적용합니다.
- flexbox 를 사용하여 큐브를 페이지에서 수직 및 수평으로 중앙에 배치하도록
body요소를 스타일링합니다. .container클래스에는 3D 효과에 중요한perspective속성이 포함되어 있습니다. 큐브에서 얼마나 멀리 떨어져 있는지 설정하는 것으로 생각하십시오. 1000px 값은 적당한 3D 효과를 제공합니다..cube클래스는 큐브의 치수 (200px × 200px) 를 정의하고transform-style: preserve-3d를 사용합니다. 이 속성은 자식 요소가 평면화되는 대신 3D 공간에 배치되어야 함을 브라우저에 알려주므로 필수적입니다..face클래스에는 여섯 면 모두에서 공유되는 스타일이 포함되어 있습니다.position: absolute는 면을 동일한 공간에 배치할 수 있도록 합니다.- 각 면은 큐브와 동일한 치수 (200px × 200px) 를 갖습니다.
- flexbox 를 사용하여 각 면의 텍스트를 중앙에 배치합니다.
- 가시성을 높이기 위해 흰색 테두리와 그림자가 있는 텍스트를 추가합니다.
이제 "Go Live" 브라우저 탭을 새로 고치면 몇 가지 변경 사항이 표시되지만 면은 여전히 서로 위에 쌓여 있습니다. 이는 아직 3D 공간에 배치하지 않았기 때문입니다. 다음 단계에서 그렇게 할 것입니다.
3D 공간에서 큐브 면 배치
이제 큐브의 각 면을 3D 공간에 배치해야 합니다. 큐브를 만들려면 각 면을 큐브 너비의 절반 (100px) 거리만큼 중심에서 여섯 개의 다른 방향으로 배치해야 합니다.
CSS 3D 변환을 사용하여 이를 수행합니다.
translateZ()는 Z 축을 따라 요소를 앞이나 뒤로 이동합니다.rotateX()는 요소를 수평 X 축을 중심으로 회전합니다.rotateY()는 요소를 수직 Y 축을 중심으로 회전합니다.
각 면을 배치하는 CSS 를 추가해 보겠습니다.
- WebIDE 에서
style.css가 열린 상태에서 다음 CSS 코드를 파일 끝에 추가합니다.
/* Position each face of the cube */
.front {
background-color: #ff8a65; /* Coral */
transform: translateZ(100px);
/* Moves the front face 100px towards the viewer */
}
.back {
background-color: #4fc3f7; /* Light Blue */
transform: rotateY(180deg) translateZ(100px);
/* Rotates 180° around Y-axis and moves 100px forward */
}
.right {
background-color: #81c784; /* Light Green */
transform: rotateY(90deg) translateZ(100px);
/* Rotates 90° right around Y-axis and moves 100px forward */
}
.left {
background-color: #9575cd; /* Purple */
transform: rotateY(-90deg) translateZ(100px);
/* Rotates 90° left around Y-axis and moves 100px forward */
}
.top {
background-color: #ffb74d; /* Orange */
transform: rotateX(90deg) translateZ(100px);
/* Rotates 90° upward around X-axis and moves 100px forward */
}
.bottom {
background-color: #f06292; /* Pink */
transform: rotateX(-90deg) translateZ(100px);
/* Rotates 90° downward around X-axis and moves 100px forward */
}
이 CSS 가 수행하는 작업을 이해해 봅시다.
- 각 면을 시각적으로 구별하기 위해 서로 다른 배경색을 지정합니다.
- 각 면에 대해 올바르게 배치하기 위해 특정 변환을 적용합니다.
- 앞면은 Z 축을 따라 뷰어를 향해 100px 이동합니다.
- 뒷면은 Y 축을 중심으로 180° 회전하고 100px 앞으로 이동합니다.
- 오른쪽 면은 Y 축을 중심으로 시계 방향으로 90° 회전하고 100px 앞으로 이동합니다.
- 왼쪽 면은 Y 축을 중심으로 시계 반대 방향으로 90° 회전하고 100px 앞으로 이동합니다.
- 윗면은 X 축을 중심으로 위쪽으로 90° 회전하고 100px 앞으로 이동합니다.
- 아랫면은 X 축을 중심으로 아래쪽으로 90° 회전하고 100px 앞으로 이동합니다.
이제 브라우저 탭을 새로 고쳐 변경 사항을 확인하십시오. 큐브의 앞면을 볼 수 있습니다. 그러나 큐브가 아직 회전하지 않으므로 다른 면을 볼 수 없습니다. 다음 단계에서 회전 애니메이션을 추가합니다.
3D 변환 작동 방식:
rotateY(90deg)변환을 적용하면 본질적으로 요소를 Y 축 (수직축) 을 중심으로 90 도 회전하여 오른쪽을 향하게 합니다.- 회전 후
translateZ(100px)를 적용하면 현재 향하고 있는 방향 (이전 회전에 따라 모든 방향이 될 수 있음) 으로 요소를 100px 앞으로 이동합니다. - 이러한 변환을 결합하여 각 면을 큐브를 형성하기 위해 올바른 위치와 방향으로 배치할 수 있습니다.
큐브 회전을 위한 애니메이션 추가
이제 큐브가 제대로 구성되었지만 정적입니다. 더 흥미롭게 만들기 위해 3D 공간에서 큐브가 지속적으로 회전하도록 애니메이션을 추가합니다.
CSS 애니메이션을 사용하면 JavaScript 를 사용하지 않고도 웹 페이지에서 움직임을 만들 수 있습니다. 키프레임 애니메이션을 정의하고 큐브에 적용합니다.
- WebIDE 에서
style.css파일 끝에 다음 CSS 코드를 추가합니다.
/* Define the rotation animation */
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
25% {
transform: rotateX(90deg) rotateY(90deg);
}
50% {
transform: rotateX(180deg) rotateY(180deg);
}
75% {
transform: rotateX(270deg) rotateY(270deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
/* Apply the animation to the cube */
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: rotate 20s infinite linear;
/* 20s defines the duration of one complete rotation */
/* infinite means the animation will repeat forever */
/* linear means the animation speed is constant */
}
이 CSS 를 이해해 봅시다.
@keyframes규칙은rotate라는 애니메이션을 정의합니다.- 애니메이션의 다양한 단계에서 요소가 어떻게 표시되어야 하는지 지정합니다.
- 0% 에서 큐브는 회전하지 않습니다.
- 25% 에서 큐브는 X 축과 Y 축 모두에서 90 도 회전했습니다.
- 50% 에서 큐브는 두 축 모두에서 180 도 회전했습니다.
- 75% 에서 큐브는 두 축 모두에서 270 도 회전했습니다.
- 100% 에서 큐브는 두 축 모두에서 360 도 회전을 완료했습니다.
이 애니메이션을 적용하기 위해
.cube선택기를 업데이트합니다.animation: rotate 20s infinite linear는rotate애니메이션을 적용합니다.- 애니메이션은 한 번의 완전한 회전에 20 초가 소요됩니다.
- 무한 반복됩니다.
- 선형 타이밍 함수는 일정한 회전 속도를 보장합니다.
이제 브라우저 탭을 새로 고치십시오. 큐브가 3D 공간에서 부드럽게 회전하여 회전하면서 여섯 개의 색상 면을 모두 표시하는 것을 볼 수 있습니다.
CSS 애니메이션 이해:
- CSS 애니메이션은 애니메이션을 설명하는 스타일과 다양한 시점에서 애니메이션의 상태를 정의하는 키프레임 세트로 구성됩니다.
- animation 속성은 여러 animation 속성에 대한 단축 속성입니다.
animation-name: @keyframes 규칙의 이름을 지정합니다.animation-duration: 애니메이션이 한 주기를 완료하는 데 걸리는 시간을 지정합니다.animation-timing-function: 애니메이션이 한 주기를 통해 진행되는 방식을 정의합니다.animation-iteration-count: 애니메이션이 반복되어야 하는 횟수를 지정합니다.
이제 HTML 과 CSS 만 사용하여 회전하는 3D 큐브를 성공적으로 만들었습니다. 이 예제는 JavaScript 가 필요 없이 시각적으로 매력적인 웹 요소를 만들기 위한 CSS 3D 변환 및 애니메이션의 강력함을 보여줍니다.
다양한 애니메이션 지속 시간, 다양한 회전 축을 실험하거나 추가 변환을 추가하여 큐브에 어떤 영향을 미치는지 확인해 보십시오.
요약
3D 회전 큐브 랩을 완료하신 것을 축하드립니다. 이 랩에서는 다음을 수행했습니다.
- 3D 큐브에 대한 여섯 개의 면으로 HTML 구조를 생성했습니다.
- 3D 공간에서 요소를 배치하기 위해 CSS 스타일을 적용했습니다.
- CSS 3D 변환을 사용하여 각 면을 3D 공간에 올바르게 배치했습니다.
- CSS 애니메이션을 추가하여 지속적으로 회전하는 큐브를 만들었습니다.
이 프로젝트는 몇 가지 중요한 CSS 개념을 소개했습니다.
- CSS 3D 변환 (translate, rotate)
- 3D 효과를 위한 perspective 속성
- 3D 위치 지정을 유지하기 위한 transform-style 속성
- CSS 키프레임 애니메이션
이러한 개념은 JavaScript 에 의존하지 않고도 매력적이고 상호 작용적인 웹 인터페이스를 만들기 위한 강력한 도구입니다. 이러한 기술을 적용하여 간단한 회전 카드에서 복잡한 3D 모델에 이르기까지 다양한 3D 요소를 만들 수 있습니다.
이 프로젝트의 확장으로 다음을 고려할 수 있습니다.
- 사용자가 큐브 위로 마우스를 가져갈 때 애니메이션을 일시 중지하기 위해 호버 효과를 추가합니다.
- 각 면에 이미지 또는 더 복잡한 콘텐츠를 추가합니다.
- 키프레임을 수정하여 다른 애니메이션 경로를 만듭니다.
- 다양한 크기, 색상 및 회전 속도를 실험합니다.
최신 CSS 는 시각 효과를 만드는 데 매우 강력하며, 이전에 JavaScript 가 필요했던 많은 애니메이션을 이제 CSS 만으로 수행할 수 있어 성능이 향상되고 코드가 더 간단해진다는 점을 기억하십시오.
