영상에 보인대로 따라하면 backface 부분이 안 보이는 오류가 있어서 수정해 봄
CSS로 3d를 해야 할 때 항상 참고하는 사이트 : https://3dtransforms.desandro.com/cube
Cube · Intro to CSS 3D transforms
Cube Cards are a good start for working with 3D transforms, but they only show off 3D in transition. To show off 3D at rest, we’ll have to create true 3D objects: prisms. We’ll start with a cube. The markup for the cube is similar to the card. This tim
3dtransforms.desandro.com
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!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>주황색 연등같은거</title>
<link rel="stylesheet" type="text/css" href="./style.css"/>
</head>
<body>
<a href="https://www.youtube.com/watch?v=nmC6QDCB7zI" style="display:none;">Html CSS Animation | Glow Effects</a>
<section class="scene">
<div class="cube">
<span class="face front" style="--i:0;"></span>
<span class="face back" style="--i:2;"></span>
<span class="face left" style="--i:-1;"></span>
<span class="face right" style="--i:1;"></span>
<span class="face top" style="--i:1;"></span>
</div>
</section>
</body>
</html>
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
@charset "utf-8";
:root{
--size:20vmin;
--tz:calc(var(--size) / 2 - 0.5px);
--orange:#fb6200;
--red:#c3300f;
--gd-orange:radial-gradient(var(--orange),var(--orange),var(--red));
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
display:flex;
justify-content:center; align-items:center;
min-height:100vh; overflow:hidden;
background:#1d0035;
perspective : calc(var(--size) * 3.5);
}
.scene{
position:relative;
width:var(--size); aspect-ratio:1/1;
perspective : calc(var(--size) * 10);
transform-style:preserve-3d;
transform:translateY(-100%) rotate3d(1,0,0,5deg);
animation: moveScene 2s linear infinite alternate;
}
@keyframes moveScene {
from{
transform:translateY(-100%) rotate3d(1,0,0,5deg);
}
to{
transform:translateY(-150%) rotate3d(1,0,0,5deg);
}
}
.cube{
transform-style:preserve-3d;
position:relative;
width:100%; aspect-ratio:1/1;
animation: rotateCube 10s linear infinite;
}
@keyframes rotateCube {
from{transform:rotate3d(0,1,0,0deg);}
to{transform:rotate3d(0,1,0,360deg);}
}
.face{
transform-style:preserve-3d;
display:flex;
justify-content:center; align-items:center;
position:absolute;
width:100%;aspect-ratio:1/1;
background:var(--gd-orange);
color:#fff; font-size:5vmin;
transform:rotateY(calc( var(--i) * 90deg )) translateZ(var(--tz));
}
.face.top{
background:var(--red);
transform:rotateX(calc( var(--i) * 90deg )) translateZ(var(--tz));
}
.face.top::before{
content:'';display:block;position:absolute;
width:calc(var(--size) * 1.5); aspect-ratio:1/1;
background:rgb(255, 176, 85);
transform:translateZ(calc(var(--size) * -2.5));
filter:blur(calc(var(--size) / 2));
box-shadow:
0 0 calc(var(--size) * .8) rgba(251,98,0,0.2),
0 0 calc(var(--size) * 1) rgba(251,98,0,0.4),
0 0 calc(var(--size) * 1.5) rgba(251,98,0,0.6),
0 0 calc(var(--size) * 2) rgba(251,98,0,0.8),
0 0 calc(var(--size) * 2.5) rgba(251,98,0,1);
animation: blinkCube 2s linear infinite alternate;
}
@keyframes blinkCube {
from{
opacity:1;
transform:translateZ(calc(var(--size) * -2.5));
filter:blur(calc(var(--size) / 3)) brightness(110%);
}
to{
opacity:0.5;
transform:translateZ(calc(var(--size) * -3));
filter:blur(var(--size));
}
}
|
cs |
'CSS&JS > 👀Study and Copy' 카테고리의 다른 글
| [JS]Codepen의 이미지 픽셀화 작업 카피(pw:1234) (0) | 2022.12.22 |
|---|---|
| [JS] 카운터 만들기 재구현 (handy tally counter) (0) | 2022.12.21 |
| [Nomad Coders] 바닐라 JS로 그림판 만들기 - 2021ver (0) | 2022.08.26 |
| WDS-Snake Game (0) | 2022.08.22 |
| [WDS]Intro.js 바닐라 자바스크립트로 구현하기 (0) | 2022.08.18 |