test.css.conflict (24572B)
1 /* Temporary hack to place the main content above when the 3D stuff is not targetted */ 2 <<<<<<< Updated upstream 3 .view3d { z-index: 0; } 4 .view3d.target-within { z-index: 2; } 5 ======= 6 .debug, .main { z-index: 0; } 7 .debug.target-within, .main.target-within { z-index: 2; } 8 >>>>>>> Stashed changes 9 10 html { position: relative; padding:0; } 11 html, body { height: 100%; } 12 .view3d { width: 100%; height:100%; top: 0; left: 0; margin: 0; padding:0; /*overflow: hidden;*/ position: fixed; } 13 14 .scene { 15 position: absolute; 16 perspective: 100vmin; 17 opacity: 0.9; 18 top: 50%; 19 left: 50%; 20 width: 100vmin; 21 height: 100vmin; 22 transform: translate3d(-50%, -50%, 0) scale(1); 23 font-size: x-large; 24 } 25 26 /* 27 .scene .rest { background: black; } 28 .scene .scene .rest { background: white; } 29 .rest:hover { background: red; } 30 :target > .scene > .rest { display: none } 31 */ 32 33 #no .scene > .room { animation: 8s turntable infinite; animation-timing-function: ease; } 34 35 .scene .scene { 36 transform: translate3d(-50%, -50%, 0) scale(0.9); 37 /*overflow: hidden; bug in firefox which scrolls the element when the target changes, instead use clip-path */ 38 clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); 39 border: thin solid blue; 40 } 41 42 .scene .test2 .scene { transform: translate3d(-50%, -50%, 0) scale(0.25); } 43 44 .three-d { 45 position: absolute; 46 transition: transform ease 2s; 47 transform-style: preserve-3d; 48 top: 50%; 49 left: 50%; 50 } 51 52 .object { 53 border: thin solid red; 54 background: pink; 55 } 56 57 :root { 58 --origin: translate3d(-50%, -50%, -50vmin); 59 --origin-: translate3d(50%, 50%, 50vmin); 60 } 61 62 :root { 63 --test: translate3d(-49vmin, 0vmin, 0vmin) rotateY(90deg) scale(0.6); 64 --test-: rotateY(-90deg) translate3d(49vmin, 0vmin, 0vmin); 65 --test-hover: translate3d(0vmin,0,50vmin) rotateY(0deg) scale(1); 66 } 67 68 .test { width: 90vmin; height: 90vmin; transform: var(--origin) var(--test); } 69 .room:target-within > .test { transform: var(--origin) var(--test-hover); } 70 .room.target-within > .test { transform: var(--origin) var(--test-hover); } 71 72 :root { 73 --test2: translate3d(49vmin, 0vmin, 0vmin) rotateY(-90deg); 74 --test2-: rotateY(90deg) translate3d(-49vmin, 0vmin, 0vmin); 75 --test2-hover: translate3d(0,0,50vmin) rotateY(0deg); 76 } 77 78 .test { --scale: 0.6; } 79 .test2 { --scale: 1; } 80 81 :root { 82 --opacity: 1; 83 } 84 85 .test2 { width: 50vmin; height: 25vmin; transform: var(--origin) var(--test2); opacity: var(--opacity); } 86 .room:target-within > .test2 { transform: var(--origin) var(--test2-hover) scale(2); } 87 .room.target-within > .test2 { transform: var(--origin) var(--test2-hover) scale(2); } 88 89 .hover { z-index: 20; } 90 .hover:target-within { z-index: 30; } 91 .hover.target-within { z-index: 30; } 92 93 .hover .hover { z-index: 40; } 94 .hover:target-within .hover:target-within { z-index: 50; } 95 .hover.target-within .hover.target-within { z-index: 50; } 96 97 /* 98 .wall-l { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(-50vmin, 0, 0) rotateY(90deg); } 99 .wall-r { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(50vmin, 0, 0) rotateY(-90deg); } 100 .wall-u { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, -50vmin, 0) rotateX(-90deg); } 101 .wall-d { opacity: 0.7; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, 50vmin, 0) rotateX(90deg); } 102 .wall-b { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, 0, -50vmin); } 103 .wall-f { opacity: 0.1; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, 0, 50vmin); 104 pointer-events: none; } 105 106 .wall { pointer-events: none; } 107 */ 108 109 @keyframes turntable { 110 0% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(0deg) rotateY(-7deg) rotateX(-7deg); } 111 25% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(-3deg) rotateY(-3deg) rotateX(7deg); } 112 50% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(5deg) rotateY(7deg) rotateX(-7deg); } 113 75% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(-3deg) rotateY(3deg) rotateX(7deg); } 114 100% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(0deg) rotateY(-7deg) rotateX(-7deg); } 115 } 116 117 .room { transform: translate3d(0,0,0) rotate(0); } 118 .room-test:target-within ~ .room { transform: var(--origin) var(--test-hover) var(--test-) var(--origin-); } 119 .room-test.target-within ~ .room { transform: var(--origin) var(--test-hover) var(--test-) var(--origin-); } 120 .room-test:target-within ~ .room .test2 { opacity: 0; pointer-events: none; transition: translate 2s, opacity 1s, left step-end 1s; } 121 .room-test.target-within ~ .room .test2 { opacity: 0; pointer-events: none; transition: translate 2s, opacity 1s, left step-end 1s; } 122 .scene:target-within:not(:target) > .room:not(:target-within) .test { opacity: 0; pointer-events: none; transition: translate 2s, opacity 1s, left step-end 1s; } 123 .scene.target-within:not(:target) > .room:not(.target-within) .test { opacity: 0; pointer-events: none; transition: translate 2s, opacity 1s, left step-end 1s; } 124 .room .test2 { transition: transform ease 2s, opacity 1s linear 1s, left step-end 1s; } 125 .room .test { transition: transform ease 2s, opacity 1s linear 1s, left step-end 1s; } 126 .room-test2:target-within ~ .room { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } 127 .room-test2.target-within ~ .room { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } 128 129 /* rainbow uses other variables as "parameters", they must be re-read in sub-elements instead of copied once on :root */ 130 * { 131 --rainbow-opacity: var(--opacity); 132 --rainbow-saturation: 80%; 133 --rainbow-lightness: 80%; 134 --rainbow: linear-gradient( 135 45deg, 136 hsla(0, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 0%, 137 hsla(36, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 10%, 138 hsla(72, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 20%, 139 hsla(108, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 30%, 140 hsla(144, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 40%, 141 hsla(180, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 50%, 142 hsla(216, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 60%, 143 hsla(252, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 70%, 144 hsla(288, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 80%, 145 hsla(324, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 90%, 146 hsla(360, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 100%); 147 148 --door-opacity: var(--opacity); 149 --door-wall-colour: rgba(255, 255, 255, var(--door-opacity)); /* white */ 150 --door-outer-frame-colour: rgba(165, 42, 42, var(--door-opacity)); /* brown */ 151 --door-inner-frame-colour: rgba(222, 184, 135, var(--door-opacity)); /* burlywood */ 152 --door: 153 linear-gradient(90deg, var(--door-wall-colour) 25%, transparent 25%, transparent 75%, var(--door-wall-colour) 75%), 154 linear-gradient(var(--door-wall-colour) 20%, transparent 20%), 155 linear-gradient( 156 90deg, 157 var(--door-wall-colour) 25%, 158 var(--door-outer-frame-colour) 25%, 159 var(--door-outer-frame-colour) 28%, 160 var(--door-inner-frame-colour) 28%, 161 var(--door-inner-frame-colour) 30%, 162 transparent 30%, 163 transparent 70%, 164 var(--door-inner-frame-colour) 70%, 165 var(--door-inner-frame-colour) 72%, 166 var(--door-outer-frame-colour) 72%, 167 var(--door-outer-frame-colour) 75%, 168 var(--door-wall-colour) 75% 169 ) 0 100% / 100% 77% no-repeat, 170 linear-gradient(var(--door-outer-frame-colour) 23%, var(--door-inner-frame-colour) 23%, var(--door-inner-frame-colour) 25%, transparent 25%); 171 } 172 173 /* text in the center of a square filling its parent, semi-transparent white background with an opaque white band below the text. */ 174 .go { 175 background: rgba(255, 255, 255, 0.6); color: black; text-decoration: none; outline: thin solid white; 176 /*mask-image: linear-gradient(rgba(0, 0, 0, 0.6) calc(50% - 0.75em), black calc(50% - 0.75em), black calc(50% + 0.75em), rgba(0, 0, 0, 0.6) calc(50% + 0.75em));*/ 177 font-size: calc(130% / var(--scale)); transform-style: preserve-3d; z-index: 100; 178 line-height: 1.5em; text-align: center; position: absolute; top: 0; left: 0; width: auto; min-width: 100%; min-height: 1.5em; 179 /* trick to center the text position: absolute in the ::before, since we might want to animate this */ 180 /*padding-top: calc(50% - 1.5em - (1.5em / 2)); height: calc(100% - (50% - 1.5em - (1.5em / 2)));*/ 181 display: flex; 182 flex-direction: column; 183 justify-content: center; 184 height: calc(100% - 1.5em); 185 padding-bottom: 1.5em; 186 transition: var(--transition-to-forward); 187 flex-wrap: wrap; 188 flex-direction: row; 189 } 190 /* 191 mask-image: glitches, hides the 3D transform in Chromium 192 flex column: can't get 100% width; 193 flex row: incorrect order in back buttons; 194 bg gradient + opacity: opacity breaks 3D transforms 195 padding: works for squares but is relative to height 196 padding + direction: wrong dir for text 197 */ 198 199 /* semi-transparent on hover */ 200 .go:hover { background: rgba(255, 255, 255, 0.1); } 201 202 /* link is displayed in top left corner when the link goes out of the current room */ 203 /* back */ .target-within:not(:target) > .go { 204 border: thin solid black; background: white; color: black; outline: thin solid rgba(255,255,255,0); 205 min-width: 0%; height: 0%; font-size: 1rem; padding-bottom: 0; 206 /*transition: background 2s, width 1s step-start, height 1s step-start;*/ 207 transition: var(--transition-to-back); 208 } 209 210 .go { 211 --transition-duration: 0.6s; 212 --transition-to-forward: background var(--transition-duration) linear, color var(--transition-duration) linear, border var(--transition-duration) linear, outline var(--transition-duration) linear, opacity var(--transition-duration) linear, min-width 1s step-start, height 1s step-start, padding-bottom 1s step-start, font-size 1s step-start, top 1s step-start; 213 --transition-to-current: background var(--transition-duration) linear, color var(--transition-duration) linear, border var(--transition-duration) linear, outline var(--transition-duration) linear, opacity var(--transition-duration) linear, min-width var(--transition-duration) step-end, height var(--transition-duration) step-end, padding-bottom var(--transition-duration) step-end, font-size var(--transition-duration) step-end, top var(--transition-duration) step-end; 214 --transition-to-back: background var(--transition-duration) linear, color var(--transition-duration) linear, border var(--transition-duration) linear, outline var(--transition-duration) linear, opacity var(--transition-duration) linear, min-width 1s step-start, height 1s step-start, padding-bottom 1s step-start, font-size 1s step-start, top 1s step-start; 215 } 216 217 /* ← back to … when the link goes out of the current room. To be able to animate it, the content is always there, and the colour changes. */ 218 .go::before { 219 content: '← back to '; 220 display: inline-block; position: relative; left: 0; width: auto; height: 1.5em; line-height: 1.5em; 221 } 222 #main > .go::before { content: '← back to start'; } 223 #main.target-within:not(:target) > .go { color: transparent; background: transparent; border-color: transparent; border-width: 0; } 224 #main.target-within:not(:target) > .go::before { border: thin solid black; background: white; } 225 #main.target-within > .go { border-width: 0; } 226 /* back */ .target-within:not(:target) > .go::before { 227 background: transparent; color: black; top: 0; min-width: 0; transition: var(--transition-to-back); } 228 /* current */ :target > .go::before { 229 background: transparent; color:transparent; z-index: -1; top: 50%; min-width: 100%; transition: var(--transition-to-current); } 230 /* forward: White band behind text */ 231 :not(.target-within) > .go::before { 232 background: white; color:transparent; z-index: -1; top: 50%; min-width: 100%; transition: var(--transition-to-forward); } 233 234 /* white band semi-transparent on hover */ 235 :not(.target-within) > .go:hover::before { background: rgba(255, 255, 255, 0.6); } 236 237 238 239 /* disable the link when it points to the current room */ 240 /*:target > .go { background: rgba(255,0,0,0.1); color: rgba(0,0,0,0.1); border: thin solid rgba(0,0,255,1); outline-color: rgba(0,255,0,0.1); pointer-events: none; transition: var(--transition-to-current); }*/ 241 :target > .go { font-size: 1rem; background: transparent; color: transparent; border: thin solid transparent; outline-color: transparent; pointer-events: none; transition: var(--transition-to-current); } 242 243 /* animate colourful arrow and disable it when the target is in a nested room */ 244 :target-within > .go::after { --distance: calc(0 - var(--width)) !important; pointer-events: none; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end, opacity 1s step-end; } 245 .target-within > .go::after { --distance: calc(0 - var(--width)) !important; pointer-events: none; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end, opacity 1s step-end; } 246 247 /* animate position and gradient of colourful arrow on hover */ 248 .go:hover::after { --distance: calc(var(--min-distance) + var(--shift)); background-position-x: 25%; /* leave 25% for bounce easing */ } 249 250 /* draw colourful arrow */ 251 .go::after { 252 --width: 10; /* vmin */ 253 --shift: 8; /* vmin */ 254 --min-distance: 10; /* vmin */ 255 --distance: var(--min-distance); /* vmin, animated */ 256 --border: calc(var(--min-distance) + var(--shift)); /* vmin */ 257 --z: calc(((var(--width) - var(--border)) / 2 + var(--distance)) * 1vmin); 258 --arrow-width-ratio: calc(var(--width) / (var(--width) + var(--border))); 259 position: absolute; content: ''; top:50%; left: 50%; width: calc(var(--width) * 1vmin); height: calc(10vmin / var(--scale)); 260 --ease-out-bounce: cubic-bezier(0.3, 1.8, 0.9, 0.9); 261 transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-start, opacity 1s linear 2s /* when coming back from a sibblign room, wait till our room is visible before showing opacity */; 262 transform: translate3d(-50%, -50%, var(--z)) rotateY(45deg); 263 --arrow-thickness: 20%; 264 --arrowhead-position: 60%; 265 --arrowhead-angle: 51.34deg; 266 --bg: rgba(214, 93, 184, 0.5); 267 border-right: calc(var(--border) * 1vmin) solid transparent; 268 background-image: linear-gradient(90deg, rgba(102, 231, 231, 0.856) 25%, rgba(255,255,255,0.8) 50%, rgba(214, 93, 184, 0.7) 75%); 269 background-size: 400%; 270 background-position-x: 75%; /* leave 25% for bounce easing */ 271 background-repeat: no-repeat; 272 --vertical-triangle: calc(var(--arrowhead-position) * var(--arrow-width-ratio)); 273 --arrow-top: calc(50% - var(--arrow-thickness)); 274 --arrow-bottom: calc(50% + var(--arrow-thickness)); 275 --mask-image: conic-gradient(from calc(-90deg - var(--arrowhead-angle)) at calc(100% * var(--arrow-width-ratio)) center, black 0deg, black calc(var(--arrowhead-angle)*2), transparent calc(var(--arrowhead-angle)*2)), 276 linear-gradient(90deg, transparent var(--vertical-triangle), black var(--vertical-triangle)), 277 linear-gradient(0deg, transparent var(--arrow-top), black var(--arrow-top), black var(--arrow-bottom), transparent var(--arrow-bottom)); 278 mask-image: var(--mask-image); 279 -webkit-mask-image: var(--mask-image); 280 mask-composite: intersect, add; 281 -webkit-mask-composite: destination-in, source-over; 282 } 283 284 /* Hide glitch where opacity on the parent breaks 3D even if the opacity is still at 1 during the first part of the animation. */ 285 .room-test.target-within ~ .room .go::after { opacity: 0; transition: opacity 1s step-start; } 286 .scene.target-within:not(:target) > .room:not(.target-within) .go::after { opacity: 0; transition: opacity 1s step-start; } 287 288 .rest { display: none; } 289 .hover-anim .rest { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 290 .scene:target-within:not(:target) > .room.room-test:not(:target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } 291 .scene.target-within:not(:target) > .room.room-test:not(.target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } 292 293 .object:target-within:before { opacity: 1; } 294 .object.target-within:before { opacity: 1; } 295 .object:before { 296 content: normal;/*"← back"; for hover only*/ 297 border: thin solid brown; 298 background: white; 299 z-index: 999; 300 position: absolute; 301 transform: translate3d(0, -100%, 0); 302 opacity: 0; 303 transition: opacity 1s linear 1s; 304 pointer-events: none; 305 } 306 <<<<<<< Updated upstream 307 ======= 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 /* 338 339 need: 6 walls, 1 content, 1 door/permalink/back, 1 :back with actual content on the link, 1 arrow 340 341 TODO: start with non-cubic rooms 342 343 normal room: 344 section:only-child content 345 ::before left wall of parent 346 aside 347 ::before ceiling of parent 348 a door+permalink+back, remove door using animation of background-position, slide a white square down for the breadcrumbs 349 ::before "→ " with a color: transparent or "← back to " with a text-shadow: transparent 350 ::after arrow 351 ::after floor of parent 352 … section … 353 ::after right wall of parent 354 355 empty room: 356 section:only-child content 357 ::before left wall of parent 358 aside TODO: would need to draw 5 walls but only one element left (+ the content, maybe), can probably fake the edges of walls with a gradient. 359 ::before ceiling of parent 360 a door+permalink+back 361 ::before "→ " with a color: transparent or "← back to " with a text-shadow: transparent 362 ::after arrow 363 ::after floor of parent 364 ::after right wall of parent 365 366 corridor: 367 section.corridor 368 … 369 section:only-child content 370 ::before longer left wall of parent 371 aside 372 ::before longer ceiling of parent 373 a door+permalink+back, remove door using animation of background-position, slide a white square down for the breadcrumbs 374 ::before "→ " with a color: transparent or "← back to " with a text-shadow: transparent 375 ::after arrow 376 ::after longer floor of parent 377 … section … 378 ::after longer right wall of parent 379 … 380 381 */ 382 383 384 385 #debug { perspective: 100vmin; width: 100vmin; height: 100vmin; top: 50%; left: 50%; position: absolute; transform: translate3d(-50%,-50%,0); } 386 387 .new-scene { 388 --inner-radius: 50vmin; 389 --transform-orig: center center var(--inner-radius); 390 } 391 392 .new-scene, .new-scene * { border: thick solid red; } 393 394 /* perspective only on the root to avoid changing the perspective in sub-elements) */ 395 .new-scene { perspective: 100vmin; /*overflow: hidden;*/ } 396 397 .new-scene, .new-scene section { 398 position: absolute; 399 /*opacity: 0.9;*/ 400 top: 50%; 401 left: 50%; 402 width: 100vmin; 403 height: 100vmin; 404 font-size: x-large; 405 transform-style: preserve-3d; 406 pointer-events: none; /* make clicks go through the section */ 407 transition: transform 2s; 408 } 409 410 .new-scene, .new-scene * { backface-visibility: hidden; } 411 #debug .new-scene { transform-origin: var(--transform-orig); transform: translate3d(10vmin,40vmin,-100vmin) rotateX(-35deg) var(--orig-r) var(--pos-r-f); } 412 .new-scene { transform-origin: var(--transform-orig); transform: var(--orig-r) var(--pos-r-f); } 413 414 .new-scene section { background: var(--door); } 415 416 /* re-enable clicks after the last property above disabled them */ 417 .new-scene::before, .new-scene::after, .new-scene > *:not(section), .new-scene section::before, .new-scene section::after, .new-scene section > *:not(section) { pointer-events: all; } 418 419 /* hide rooms that are more than 270° away so that they don't show on top of the current room */ 420 /* TODO: use :first-child etc. to make this selector exclude */ 421 .new-scene > section > section > section { --opacity: 0; pointer-events: none; } 422 423 iframe { opacity: var(--opacity); } 424 425 .new-scene section:first-of-type { transform-origin: var(--transform-orig); transform: var(--orig-r) var(--pos-r-l) var(--rot-r-l); } 426 .new-scene section:last-of-type { transform-origin: var(--transform-orig); transform: var(--orig-r) var(--pos-r-r) var(--rot-r-r); } 427 428 .new-scene section:target { transform-origin: var(--transform-orig); transform: var(--orig-r) var(--pos-r-f) var(--rot-r-f); } 429 430 .new-scene section:target:first-of-type ~ section:last-of-type { transform-origin: var(--transform-orig); transform: var(--orig-r) var(--pos-r-r) var(--pos-r-l-) var(--rot-r-l-) var(--rot-r-r); } 431 .new-scene.target-within > section:first-of-type:not(:target), 432 .new-scene .target-within > section:first-of-type:not(:target) { transform-origin: var(--transform-orig); transform: var(--orig-r) var(--pos-r-l) var(--pos-r-r-) var(--rot-r-r-) var(--rot-r-l); } 433 434 :root { 435 --orig-subelements-of-back: translate3d(0, 0, 50vmin); 436 --orig-w-l: var(--orig-subelements-of-back); 437 --orig-w-r: var(--orig-subelements-of-back); 438 /* -w- = wall, -r- = room. We want global translations, but translations use the local axes, so rotations must be done last */ 439 --pos-w-l: translate3d(-50vmin, 0, 0); --rot-w-l: rotateY(90deg); 440 --pos-w-r: translate3d(50vmin, 0, 0); --rot-w-r: rotateY(-90deg); 441 --pos-w-u: translate3d(0,-50vmin,-50vmin); --rot-w-u: rotateX(90deg); 442 --pos-w-d: translate3d(0,50vmin,-50vmin); --rot-w-d: rotateX(-90deg); 443 --pos-w-b: translate3d(0,0,-100vmin); --rot-w-b: rotateZ(0deg); 444 --pos-w-f: translate3d(0,0,0); --rot-w-f: rotateZ(0deg); 445 --opacity: 1; 446 /* TODO: use calc and overridable variables to position the room? */ 447 --orig-r: translate3d(-50%, -50%, -50vmin); 448 --pos-r-l : translate3d(-49.5vmin, 0, 0); --rot-r-l : rotateY(90deg); 449 --pos-r-l-: translate3d( 49.5vmin, 0, 0); --rot-r-l-: rotateY(-90deg); 450 --pos-r-r : translate3d( 49.5vmin, 0, 0); --rot-r-r : rotateY(-90deg); 451 --pos-r-r-: translate3d(-49.5vmin, 0, 0); --rot-r-r-: rotateY(0deg); 452 --pos-r-f : translate3d(0, 0, 50vmin); --rot-r-f : rotateZ(0deg); 453 } 454 455 /* walls */ 456 /*u*/ .new-scene::before, .new-scene section::before { content: ''; display:block; background: var(--rainbow); position: absolute; width: 100vmin; height: 100vmin; 457 transform-origin: var(--transform-orig); transform: var(--pos-w-u) var(--rot-w-u); pointer-events: none; 458 border: none; } 459 460 /*d*/ .new-scene::after, .new-scene section::after { content: ''; display:block; top:0; background: var(--rainbow); position: absolute; width: 100vmin; height: 100vmin; 461 transform-origin: var(--transform-orig); transform: var(--pos-w-d) var(--rot-w-d); pointer-events: none; 462 border: none; } 463 464 /*b*/ .new-scene aside { width: 100vmin; height: 100vmin; top: 0; left: 0; position: absolute; transform-origin: var(--transform-orig); transform: var(--pos-w-b) var(--rot-w-b); background: var(--rainbow); transform-style: preserve-3d; 465 border: none; pointer-events: none; } 466 467 /*l*/ .new-scene aside:last-child::before { content: ''; width: 100vmin; height: 100vmin; top: 0; left: 0; position: absolute; transform-origin: var(--transform-orig); transform: var(--orig-w-l) var(--pos-w-l) var(--rot-w-l); background: var(--rainbow); 468 border: none; pointer-events: none; } 469 470 /*r*/ .new-scene aside:last-child::after { content: ''; width: 100vmin; height: 100vmin; top: 0; left: 0; position: absolute; transform-origin: var(--transform-orig); transform: var(--orig-w-r) var(--pos-w-r) var(--rot-w-r); background: var(--rainbow); 471 border: none; pointer-events: none; } 472 473 .new-scene aside > a { position: absolute; transform-origin: var(--transform-orig); transform: translate3d(0, 0, 100vmin); pointer-events: all; 474 background: white; border: thin solid black; } 475 >>>>>>> Stashed changes