3D 효과를 요소에 적용하는 6가지 예제를 CSS와 HTML로 구성하고 상세히 설명해 드리겠습니다.
예제 1: 3D 회전 효과
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotateY(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
이 예제에서는 3D 회전 효과를 적용했습니다. transform: rotateY(45deg);는 Y 축을 중심으로 45도 회전합니다.
예제 2: 3D 큐브 효과
<!DOCTYPE html>
<html>
<head>
<style>
.cube {
width: 100px;
height: 100px;
transform-style: preserve-3d;
}
.face {
position: absolute;
width: 100px;
height: 100px;
background-color: #e74c3c;
}
.front { transform: translateZ(50px); }
.back { transform: translateZ(-50px); }
.left { transform: rotateY(-90deg) translateZ(50px); }
.right { transform: rotateY(90deg) translateZ(50px); }
.top { transform: rotateX(90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }
</style>
</head>
<body>
<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</body>
</html>
이 예제에서는 3D 큐브 효과를 적용했습니다. transform-style: preserve-3d;로 부모 요소에 3D 효과를 적용하고, 각 면을 transform으로 배치하여 큐브를 만듭니다.
예제 3: 3D 테두리 효과
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: #3498db;
border: 5px solid #e74c3c;
transform: translateZ(30px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
이 예제에서는 3D 테두리 효과를 적용했습니다. transform: translateZ(30px);를 사용하여 요소를 앞으로 이동시켜 3D 테두리 효과를 생성합니다.
예제 4: 3D 텍스트 효과
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 36px;
font-weight: bold;
color: #e74c3c;
text-transform: uppercase;
transform: perspective(100px) rotateX(45deg);
}
</style>
</head>
<body>
<div class="text">3D Text</div>
</body>
</html>
이 예제에서는 3D 텍스트 효과를 적용했습니다. transform: perspective(100px) rotateX(45deg);로 텍스트를 3D로 변형시킵니다.
예제 5: 3D 그림자 효과
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: translateZ(10px);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
이 예제에서는 3D 그림자 효과를 적용했습니다. transform: translateZ(10px);로 요소를 앞으로 이동시키고, box-shadow 속성으로 그림자를 추가합니다.
예제 6: 3D 회전과 크기 변환 효과
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotateX(45deg) scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
이 예제에서는 3D 회전과 크기 변환 효과를 적용했습니다. transform: rotateX(45deg) scale(1.5);로 X 축을 중심으로 회전하고 크기를 확대합니다.
'CSS' 카테고리의 다른 글
| 테이블 스타일링: HTML 테이블 스타일 변경. (0) | 2023.12.23 |
|---|---|
| 텍스트 그라데이션: 텍스트에 그라데이션 효과. (0) | 2023.12.23 |
| 반복 배경 이미지: 배경 이미지 반복 설정. (0) | 2023.12.23 |
| 뒷 배경 이미지: 요소의 배경에 이미지 추가. (0) | 2023.12.23 |
| 페이드 인/아웃: 요소의 페이드 인/아웃 효과. (1) | 2023.12.23 |