3D란?
D란 '차원'을 뜻하는 '디멘션 ( Dimension )'의 함축어로 3차원을 일컫는 말입니다.
차원은 하나의 축을 이야기하며 하나의 축만을 가진것을 '선'으로 분류하고 두개의 축을 가지면 '면'이라고 합니다. 여기에 하나의 축을 더하여 3개의 축을 가지면 '입체' 즉, 3차원을 표현하는 것입니다.
우리가 보고있는 모니터는 면으로 이루어져있고 브라우저또한 면으로 이루어져있습니다.
그렇다면 우리는 어떻게 면에 입체를 표현할 수 있을까요?
CSS로 3차원 구현하기.
import React from "react";
import styled from "styled-components";
function Card() {
return (
<World>
<Item>Card</Item>
<Item>Card</Item>
<Item>Card</Item>
</World>
);
}
export default Card;
const Item = styled.div`
background-color: red;
width: 100px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
margin: 1em;
transform: perspective(500px) rotateY(45deg);
`;
const World = styled.div`
background-color: yellow;
width: 80vw;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
`;3차원을 구별하는 가장 간단한 방법은 물체를 회전 시키는 겁니다.
브라우저에서 3차원을 표현하기 위해서 필수로 들어가는 속성은perspective ( 관점 ) 입니다.
perspective
perspective 속성은 3D 공간감을 주기위해 사용되며 눈과의 거리를 표현하는데 사용됩니다.
같은 각도만큼 회전한 물체라도 눈과의 거리( 관점 )에따라 그 물체의 회전이 부각되어 보이는 정도는 달라지게 됩니다.
| 500px | 100px |
|---|---|
 |  |
물체가 눈과 가까워지면 3D의 효과는 더 다이나믹해 집니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
@keyframes ani {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-200px) rotateX(430deg) rotateY(610deg)
rotateZ(160deg);
}
}
.box {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.box:hover .item {
animation: ani 1s infinite alternate cubic-bezier(0, 0.24, 0, 0.92);
}
.item {
background-color: black;
width: 100px;
height: 100px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all 1s;
transform-style: preserve-3d;
}
.item:hover {
animation-play-state: paused;
}
.item-side {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
perspective: 500px;
}
.side1 {
background: red;
transform: translateZ(50px);
}
.side2 {
background: orange;
transform: rotateY(90deg) translateZ(50px);
}
.side3 {
background: yellow;
transform: rotateY(180deg) translateZ(50px);
}
.side4 {
background: green;
transform: rotateY(270deg) translateZ(50px);
}
.side5 {
background: blue;
transform: rotateX(90deg) translateZ(50px);
}
.side6 {
background: violet;
transform: rotateX(90deg) translateZ(-50px);
}
</style>
<body>
<div class="box">
<div class="item">
<div class="item-side side1"></div>
<div class="item-side side2"></div>
<div class="item-side side3"></div>
<div class="item-side side4"></div>
<div class="item-side side5"></div>
<div class="item-side side6"></div>
</div>
</div>
</body>
</html>
통통 튀는 효과의 상자 예제 코드 입니다.
Front End