61 lines
1.2 KiB
CSS
61 lines
1.2 KiB
CSS
|
body {
|
||
|
|
display: grid;
|
||
|
|
grid-template-rows: 5em 1fr 5em;
|
||
|
|
|
||
|
|
perspective: 440vw;
|
||
|
|
perspective-origin: 50% 120%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* CUBE ASSEMBLY */
|
||
|
|
/* the rest is in cube.ts */
|
||
|
|
|
||
|
|
html {
|
||
|
|
--side: min(65vh, 70vw);
|
||
|
|
--half: calc(var(--side) * .5);
|
||
|
|
--nhalf: calc(0em - var(--half));
|
||
|
|
--breathe: calc(var(--side) * .1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* cube shadow */
|
||
|
|
html {
|
||
|
|
background:
|
||
|
|
radial-gradient(circle, hsl(330deg 40% 40% / 70%), transparent 58%),
|
||
|
|
var(--gradient);
|
||
|
|
background-blend-mode: multiply;
|
||
|
|
}
|
||
|
|
|
||
|
|
#outer {
|
||
|
|
--transform-origin: 50% 50% calc(var(--nhalf) - min(6vh, 6vw));
|
||
|
|
}
|
||
|
|
|
||
|
|
#outer, #cube {
|
||
|
|
transform-style: preserve-3d;
|
||
|
|
transform-origin: var(--transform-origin);
|
||
|
|
width: calc(var(--side) + 10vw);
|
||
|
|
height: calc(var(--side) + 10vh);
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#cube {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
#cube > section {
|
||
|
|
position: absolute;
|
||
|
|
inset: 5vh 5vw;
|
||
|
|
overflow: auto;
|
||
|
|
transform-origin: var(--transform-origin);
|
||
|
|
transform: var(--base-transform);
|
||
|
|
overscroll-behavior: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
@supports (scrollbar-color: pink orange) { /* safari detector */
|
||
|
|
#cube:not([data-moving]) > section {
|
||
|
|
animation: breathe 9s infinite ease-in-out;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes breathe {
|
||
|
|
35% { transform: translateZ(var(--breathe)) var(--base-transform); }
|
||
|
|
}
|