Skip to content

Commit 4e3664d

Browse files
spanelwebspanelweb
authored
Create style.css
1 parent 572cb9f commit 4e3664d

1 file changed

Lines changed: 214 additions & 0 deletions

File tree

‎style.css‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
/* CSS Variables untuk kontrol 3D yang Presisi & Responsif */
2+
:root {
3+
--depth: 600px; /* Kedalaman lorong di desktop */
4+
}
5+
6+
@media (max-width: 992px) {
7+
:root {
8+
--depth: 450px; /* Lebih dangkal di tablet */
9+
}
10+
}
11+
12+
@media (max-width: 576px) {
13+
:root {
14+
--depth: 300px; /* Sangat pas untuk HP portrait */
15+
}
16+
}
17+
18+
* {
19+
margin: 0;
20+
padding: 0;
21+
box-sizing: border-box;
22+
}
23+
24+
body {
25+
background-color: #000;
26+
overflow: hidden;
27+
height: 100vh;
28+
display: flex;
29+
justify-content: center;
30+
align-items: center;
31+
font-family: sans-serif;
32+
}
33+
34+
/* Kontainer Utama Kamera 3D */
35+
.gallery-container {
36+
width: 100vw;
37+
height: 100vh;
38+
perspective: 800px; /* Jarak pandang kamera */
39+
perspective-origin: center;
40+
position: relative;
41+
}
42+
43+
/* Ruangan Lorong 3D */
44+
.cube-room {
45+
position: absolute;
46+
width: 100%;
47+
height: 100%;
48+
transform-style: preserve-3d;
49+
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
50+
pointer-events: none;
51+
}
52+
53+
/* Base Dinding */
54+
.wall {
55+
position: absolute;
56+
backface-visibility: hidden;
57+
pointer-events: none;
58+
background-color: #0a0a0a;
59+
box-sizing: border-box;
60+
}
61+
62+
/* Grid khusus dinding dengan foto */
63+
.wall-grid {
64+
display: grid;
65+
gap: 15px;
66+
padding: 20px;
67+
}
68+
69+
/* --- DINDING TENGAH --- */
70+
.center-wall {
71+
width: 100%;
72+
height: 100%;
73+
left: 0;
74+
top: 0;
75+
transform: translateZ(calc(-1 * var(--depth))); /* Menempel pas di ujung kedalaman */
76+
display: flex;
77+
flex-direction: column;
78+
justify-content: center;
79+
align-items: center;
80+
color: white;
81+
text-align: center;
82+
background-color: #111;
83+
background-size: cover;
84+
background-position: center;
85+
border: 2px solid rgba(255, 255, 255, 0.1);
86+
transition: background-image 0.5s ease, border-color 0.5s ease;
87+
pointer-events: auto;
88+
z-index: 1;
89+
}
90+
91+
.center-wall::before {
92+
content: '';
93+
position: absolute;
94+
top: 0; left: 0; right: 0; bottom: 0;
95+
background: rgba(0, 0, 0, 0.6);
96+
z-index: 1;
97+
opacity: 0;
98+
transition: opacity 0.5s;
99+
}
100+
.center-wall.has-bg::before {
101+
opacity: 1;
102+
}
103+
104+
.hero-text {
105+
z-index: 2;
106+
padding: 20px;
107+
}
108+
109+
.reset-bg-btn {
110+
margin-top: 15px;
111+
padding: 8px 16px;
112+
background: rgba(255, 255, 255, 0.2);
113+
border: 1px solid #fff;
114+
color: #fff;
115+
cursor: pointer;
116+
border-radius: 4px;
117+
font-size: 14px;
118+
display: none;
119+
transition: background 0.2s;
120+
}
121+
.reset-bg-btn:hover {
122+
background: rgba(255, 255, 255, 0.4);
123+
}
124+
125+
/* --- SISI LORONG (MATEMATIKA 3D PRESISI & SEAMLESS) --- */
126+
.left-wall {
127+
width: var(--depth);
128+
height: 100%;
129+
left: 0;
130+
top: 0;
131+
transform: rotateY(90deg);
132+
transform-origin: left center;
133+
grid-template-columns: repeat(3, 1fr);
134+
grid-template-rows: repeat(4, 1fr);
135+
}
136+
137+
.right-wall {
138+
width: var(--depth);
139+
height: 100%;
140+
right: 0;
141+
top: 0;
142+
transform: rotateY(-90deg);
143+
transform-origin: right center;
144+
grid-template-columns: repeat(3, 1fr);
145+
grid-template-rows: repeat(4, 1fr);
146+
}
147+
148+
.top-wall {
149+
width: 100%;
150+
height: var(--depth);
151+
left: 0;
152+
top: 0;
153+
transform: rotateX(-90deg);
154+
transform-origin: center top;
155+
grid-template-columns: repeat(4, 1fr);
156+
grid-template-rows: repeat(3, 1fr);
157+
}
158+
159+
.bottom-wall {
160+
width: 100%;
161+
height: var(--depth);
162+
left: 0;
163+
bottom: 0;
164+
transform: rotateX(90deg);
165+
transform-origin: center bottom;
166+
grid-template-columns: repeat(4, 1fr);
167+
grid-template-rows: repeat(3, 1fr);
168+
}
169+
170+
/* --- ITEM GAMBAR --- */
171+
.wall .photo-item {
172+
width: 100%;
173+
height: 100%;
174+
object-fit: cover;
175+
border: 1px solid rgba(255, 255, 255, 0.15);
176+
filter: brightness(0.4);
177+
transition: filter 0.3s, transform 0.3s, border-color 0.3s;
178+
cursor: pointer;
179+
pointer-events: auto;
180+
}
181+
182+
.wall .photo-item:hover {
183+
filter: brightness(1);
184+
transform: scale(1.03);
185+
border-color: #fff;
186+
z-index: 10;
187+
}
188+
189+
/* --- RESPONSIVE UNTUK LAYAR MOBILE --- */
190+
@media (max-width: 768px) {
191+
.wall-grid {
192+
gap: 8px;
193+
padding: 10px;
194+
}
195+
196+
/* Penataan grid vertikal karena layar HP sempit & tinggi */
197+
.left-wall, .right-wall {
198+
grid-template-columns: repeat(2, 1fr);
199+
grid-template-rows: repeat(6, 1fr);
200+
}
201+
202+
/* Penataan grid horizontal untuk atap & lantai */
203+
.top-wall, .bottom-wall {
204+
grid-template-columns: repeat(6, 1fr);
205+
grid-template-rows: repeat(2, 1fr);
206+
}
207+
208+
.center-wall h1 {
209+
font-size: 2.2rem !important;
210+
}
211+
.center-wall p {
212+
font-size: 0.9rem !important;
213+
}
214+
}

0 commit comments

Comments
 (0)