๐ฅ HTML/CSS๋ฅผ ํ์ฉํ 3D flip ๋ฒํผ ๋ง๋ค๊ธฐ
๐ฅ ๋ฒํผ ๋ณด๋ฌ๊ฐ๊ธฐ
1. ๐ ๋ผ๋ ๋ง๋ค๊ธฐ
โ code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Flip button</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="flip-btn">
<div class="front">front</div>
<div class="back">back</div>
</div>
</div>
</body>
</html>๊ต์ฅํ ๊ฐ๋จํ๋ค.
2. ๐ ๊พธ๋ฉฐ์ฃผ๊ธฐ & ํจ๊ณผ ๋ฃ๊ธฐ
โ code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
perspective: 1000px;
}perspective๋ ์๊ทผ๊ฐ์ ์๊ธฐ๊ฒํ๋ ์์. ์ซ์๊ฐ ์์์๋ก ๋ ์๊ทผ๊ฐ ์ฌ๋ผ๊ฐ. ์ต์์ ํ๊ทธ์ ์จ์ผํจ.
.flip-btn {
width: 200px;
height: 100px;
color: white;
text-align: center;
line-height: 100px;ํ ์คํธ๊ฐ ํ ์ค ์ผ๋, ์์์ height ๊ฐ๊ณผ line-height ๊ฐ์ด ๊ฐ์ผ๋ฉด ์์ง ์ค์ ์ ๋ ฌ ๋จ.
transform-style: preserve-3d;
transition: .5s;
cursor: pointer;
}transform-style: preserve-3d (3d๊ณต๊ฐ์ ๋ฐฐ์น. z์ถ์ด ์๊น)
transition: .5s (0.5์ด์ ๊ฑธ์ณ์ ์ด๋ฒคํธ ์คํ)
.flip-btn:hover{
transform: rotateX(-90deg);
}hover: ๋ง์ฐ์ค ํฌ์ธํฐ๊ฐ ์ฌ๋ผ๊ฐ๋ ์ด๋ฒคํธ
.front {
background-color: goldenrod;
height: 100px;
transform: translateZ(50px);
}
.back {
background-color: darkgoldenrod;
height: 100px;
transform: rotateX(90deg) translateZ(150px);
/* X์ถ์ผ๋ก 90๋๋ฅผ ๋๋ ค์ ์์ชฝ ๋ฐฉํฅ์ด Z์ถ์ด ๋จ.*/
}
comment
๋ค์์๋ ์์ ํ 3D์ ํํ๋ก ๋ง๋ค๊ณ ์ปค์๋ก ํ์ ๊ฐ๋ฅํ ํํ๋ฅผ ๋ง๋ค์ด ๋ณผ ์์ ์ด๋ค. ๋ํ, ํด๋ฆญ ์ ์ด๋ฒคํธ๊ฐ ์คํ๋๋ ๊ธฐ๋ฅ๋ ๋ฃ์ด๋ณด๊ณ ์ถ๋ค.
๊ฟ๊พธ๋์ค