260 lines
14 KiB
CSS
260 lines
14 KiB
CSS
html { position: relative; padding:0; }
|
|
html, body { height: 100%; }
|
|
.view3d { width: 100%; height:100%; top: 0; left: 0; margin: 0; padding:0; /*overflow: hidden;*/ position: fixed; }
|
|
|
|
.scene {
|
|
position: absolute;
|
|
perspective: 100vmin;
|
|
opacity: 0.9;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 100vmin;
|
|
height: 100vmin;
|
|
transform: translate3d(-50%, -50%, 0) scale(1);
|
|
font-size: x-large;
|
|
}
|
|
|
|
/*
|
|
.scene .rest { background: black; }
|
|
.scene .scene .rest { background: white; }
|
|
.rest:hover { background: red; }
|
|
:target > .scene > .rest { display: none }
|
|
*/
|
|
|
|
#no .scene > .room { animation: 8s turntable infinite; animation-timing-function: ease; }
|
|
|
|
.scene .scene {
|
|
transform: translate3d(-50%, -50%, 0) scale(0.9);
|
|
/*overflow: hidden; bug in firefox which scrolls the element when the target changes, instead use clip-path */
|
|
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
|
|
border: thin solid blue;
|
|
}
|
|
|
|
.scene .test2 .scene { transform: translate3d(-50%, -50%, 0) scale(0.25); }
|
|
|
|
.three-d {
|
|
position: absolute;
|
|
transition: transform ease 2s;
|
|
transform-style: preserve-3d;
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
|
|
.object {
|
|
border: thin solid red;
|
|
background: pink;
|
|
}
|
|
|
|
:root {
|
|
--origin: translate3d(-50%, -50%, -50vmin);
|
|
--origin-: translate3d(50%, 50%, 50vmin);
|
|
}
|
|
|
|
:root {
|
|
--test: translate3d(-49vmin, 0vmin, 0vmin) rotateY(90deg) scale(0.6);
|
|
--test-: rotateY(-90deg) translate3d(49vmin, 0vmin, 0vmin);
|
|
--test-hover: translate3d(0vmin,0,50vmin) rotateY(0deg) scale(1);
|
|
}
|
|
|
|
.test { width: 90vmin; height: 90vmin; transform: var(--origin) var(--test); }
|
|
.room:target-within > .test { transform: var(--origin) var(--test-hover); }
|
|
.room.target-within > .test { transform: var(--origin) var(--test-hover); }
|
|
|
|
:root {
|
|
--test2: translate3d(49vmin, 0vmin, 0vmin) rotateY(-90deg);
|
|
--test2-: rotateY(90deg) translate3d(-49vmin, 0vmin, 0vmin);
|
|
--test2-hover: translate3d(0,0,50vmin) rotateY(0deg);
|
|
}
|
|
|
|
.test { --scale: 0.6; }
|
|
.test2 { --scale: 1; }
|
|
|
|
:root {
|
|
--opacity: 1;
|
|
}
|
|
|
|
.test2 { width: 50vmin; height: 25vmin; transform: var(--origin) var(--test2); opacity: var(--opacity); }
|
|
.room:target-within > .test2 { transform: var(--origin) var(--test2-hover) scale(2); }
|
|
.room.target-within > .test2 { transform: var(--origin) var(--test2-hover) scale(2); }
|
|
|
|
.hover { z-index: 20; }
|
|
.hover:target-within { z-index: 30; }
|
|
.hover.target-within { z-index: 30; }
|
|
|
|
.hover .hover { z-index: 40; }
|
|
.hover:target-within .hover:target-within { z-index: 50; }
|
|
.hover.target-within .hover.target-within { z-index: 50; }
|
|
|
|
.wall-l { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(-50vmin, 0, 0) rotateY(90deg); }
|
|
.wall-r { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(50vmin, 0, 0) rotateY(90deg); }
|
|
.wall-u { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, -50vmin, 0) rotateX(90deg); }
|
|
.wall-d { opacity: 0.7; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, 50vmin, 0) rotateX(90deg); }
|
|
.wall-b { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, 0, -50vmin); }
|
|
.wall-f { opacity: 0.1; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, 0, 50vmin);
|
|
pointer-events: none; }
|
|
|
|
.wall { pointer-events: none; }
|
|
|
|
@keyframes turntable {
|
|
0% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(0deg) rotateY(-7deg) rotateX(-7deg); }
|
|
25% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(-3deg) rotateY(-3deg) rotateX(7deg); }
|
|
50% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(5deg) rotateY(7deg) rotateX(-7deg); }
|
|
75% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(-3deg) rotateY(3deg) rotateX(7deg); }
|
|
100% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(0deg) rotateY(-7deg) rotateX(-7deg); }
|
|
}
|
|
|
|
.room { transform: translate3d(0,0,0) rotate(0); }
|
|
.room-test:target-within ~ .room { transform: var(--origin) var(--test-hover) var(--test-) var(--origin-); }
|
|
.room-test.target-within ~ .room { transform: var(--origin) var(--test-hover) var(--test-) var(--origin-); }
|
|
.room-test:target-within ~ .room .test2 { opacity: 0; left: 9999vmin; transition: translate 2s, opacity 1s, left step-end 1s; }
|
|
.room-test.target-within ~ .room .test2 { opacity: 0; left: 9999vmin; transition: translate 2s, opacity 1s, left step-end 1s; }
|
|
.room .test2 { transition: transform ease 2s, opacity 1s linear 1s, left step-end 1s; }
|
|
.room-test2:target-within ~ .room { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); }
|
|
.room-test2.target-within ~ .room { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); }
|
|
|
|
:root {
|
|
--rainbow-saturation: 80%;
|
|
--rainbow-lightness: 40%;
|
|
--rainbow: linear-gradient(
|
|
45deg,
|
|
hsl(0, var(--rainbow-saturation), var(--rainbow-lightness)) 0%,
|
|
hsl(36, var(--rainbow-saturation), var(--rainbow-lightness)) 10%,
|
|
hsl(72, var(--rainbow-saturation), var(--rainbow-lightness)) 20%,
|
|
hsl(108, var(--rainbow-saturation), var(--rainbow-lightness)) 30%,
|
|
hsl(144, var(--rainbow-saturation), var(--rainbow-lightness)) 40%,
|
|
hsl(180, var(--rainbow-saturation), var(--rainbow-lightness)) 50%,
|
|
hsl(216, var(--rainbow-saturation), var(--rainbow-lightness)) 60%,
|
|
hsl(252, var(--rainbow-saturation), var(--rainbow-lightness)) 70%,
|
|
hsl(288, var(--rainbow-saturation), var(--rainbow-lightness)) 80%,
|
|
hsl(324, var(--rainbow-saturation), var(--rainbow-lightness)) 90%,
|
|
hsl(360, var(--rainbow-saturation), var(--rainbow-lightness)) 100%)
|
|
}
|
|
|
|
.go { background: rgba(255, 255, 255, 0.6); color: black; text-decoration: none; z-index: 100; font-size: calc(130% / var(--scale));
|
|
outline: thin solid white;
|
|
position: absolute; top: 0; bottom: 0; left:0; right: 0; display: flex; align-items: center; justify-content: center;
|
|
transition: background 0.6s, translate 2s, left step-start 1s; transform-style: preserve-3d; }
|
|
.go::before { position: absolute; content: ''; left: 0; right: 0; height: 1.5em; z-index: -1;
|
|
background: blueviolet; transition: background 0.2s; }
|
|
.go:hover::before { background: rgba(255, 255, 255, 0.6); }
|
|
.go:hover { background: rgba(255, 255, 255, 0.1); }
|
|
:target-within > .go { background: rgba(255, 255, 255, 0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; }
|
|
.target-within > .go { background: rgba(255, 255, 255, 0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; }
|
|
:target-within > .go::before { opacity: 0.6; background: rgba(255, 255, 255, 0); color: rgba(0, 0, 0, 0); left: 9999vmin; }
|
|
.target-within:target > .go::before {
|
|
transition: background 0.6s linear, transform linear 1s, left 1s step-end, opacity 0.6s linear;
|
|
background: red; color: black; mask-image: none; border: thin solid black;
|
|
padding: 0; top: 0; left: -9999vmin; right: unset;
|
|
position: fixed; width: auto; height: auto;
|
|
content: '← back' attr(href);
|
|
opacity: 0;
|
|
}
|
|
:target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end, opacity 1s step-end; }
|
|
.target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end, opacity 1s step-end; }
|
|
.target-within:not(:target) > .go::before {
|
|
animation: 1s anim 1s;
|
|
transition: background 0.6s, transform 1s, left 1s step-end;
|
|
background: red; color: black; mask-image: none; border: thin solid black;
|
|
padding: 0; top: 0; left: -9999vmin; right: unset;
|
|
position: fixed; width: auto; height: auto;
|
|
content: '← back' attr(href);
|
|
opacity: 0.9;
|
|
}
|
|
@keyframes anim {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 0.9; }
|
|
}
|
|
@keyframes animout {
|
|
0% { opacity: 0.9; }
|
|
50% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
/** { transition: all 2s step-end 1000s !important; }*/
|
|
|
|
.target-within:not(:target) > .go { /*font-size: 1%;*/ width: 0; height: 0; border: none; background: none; color: transparent; outline: none; }
|
|
.go:hover::after { --distance: calc(var(--min-distance) + var(--shift)); background-position-x: 25%; /* don't go to 100% because the easing goes beyond the value */ }
|
|
.go::after {
|
|
--width: 10; /* vmin */
|
|
--shift: 8; /* vmin */
|
|
--min-distance: 10; /* vmin */
|
|
--distance: var(--min-distance); /* vmin, animated */
|
|
--border: calc(var(--min-distance) + var(--shift)); /* vmin */
|
|
--z: calc(((var(--width) - var(--border)) / 2 + var(--distance)) * 1vmin);
|
|
--arrow-width-ratio: calc(var(--width) / (var(--width) + var(--border)));
|
|
position: absolute; content: ''; top:50%; left: 50%; width: calc(var(--width) * 1vmin); height: calc(10vmin / var(--scale));
|
|
--ease-out-bounce: cubic-bezier(0.3, 1.8, 0.9, 0.9);
|
|
transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-start;
|
|
transform: translate3d(-50%, -50%, var(--z)) rotateY(45deg);
|
|
--arrow-thickness: 20%;
|
|
--arrowhead-position: 60%;
|
|
--arrowhead-angle: 51.34deg; /*38.66deg;*/
|
|
--bg: rgba(214, 93, 184, 0.5);
|
|
|
|
/*
|
|
background: linear-gradient(var(--arrowhead-angle), var(--bg) 50%, transparent 50%) 60em 0em / calc(100em - 60em) 50em no-repeat,
|
|
linear-gradient(calc(0deg - var(--arrowhead-angle)), transparent 50%, var(--bg) 50%) 60em 50em / calc(100em - 60em) 50em no-repeat,
|
|
linear-gradient( 0deg, transparent calc(50% - var(--arrow-thickness)),
|
|
var(--bg) calc(50% - var(--arrow-thickness)),
|
|
var(--bg) calc(50% + var(--arrow-thickness)),
|
|
transparent calc(50% + var(--arrow-thickness))) 0em 0em / 60em 100em no-repeat;
|
|
*/
|
|
border-right: calc(var(--border) * 1vmin) solid transparent;
|
|
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%);
|
|
background-size: 400%;
|
|
background-position-x: 75%; /* don't go to 100% because the easing goes beyond the value */
|
|
background-repeat: no-repeat;
|
|
--vertical-triangle: calc(var(--arrowhead-position) * var(--arrow-width-ratio));
|
|
--arrow-top: calc(50% - var(--arrow-thickness));
|
|
--arrow-bottom: calc(50% + var(--arrow-thickness));
|
|
--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)),
|
|
linear-gradient(90deg, transparent var(--vertical-triangle), black var(--vertical-triangle)),
|
|
linear-gradient(0deg, transparent var(--arrow-top), black var(--arrow-top), black var(--arrow-bottom), transparent var(--arrow-bottom));
|
|
|
|
|
|
|
|
/* --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)),
|
|
linear-gradient(90deg, transparent var(--vertical-triangle), black 28%),
|
|
linear-gradient(0deg, transparent var(--arrow-top), black var(--arrow-top), black var(--arrow-bottom), transparent var(--arrow-bottom);*/
|
|
|
|
mask-image: var(--mask-image);
|
|
-webkit-mask-image: var(--mask-image);
|
|
mask-composite: intersect, add;
|
|
-webkit-mask-composite: destination-in, source-over;
|
|
|
|
/*
|
|
font-size: 1px;
|
|
height: 100em;
|
|
width: 100em;
|
|
clip-path: polygon(0% calc(50% - var(--arrow-thickness)),
|
|
var(--arrowhead-position) calc(50% - var(--arrow-thickness)),
|
|
var(--arrowhead-position) 0%,
|
|
100% 50%,
|
|
var(--arrowhead-position) 100%,
|
|
var(--arrowhead-position) calc(50% + var(--arrow-thickness)),
|
|
0% calc(50% + var(--arrow-thickness)));
|
|
|
|
pointer-events: all;
|
|
*/
|
|
}
|
|
|
|
.rest { position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
|
|
.scene:target-within:not(:target) > .room.room-test:not(:target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); }
|
|
.scene.target-within:not(:target) > .room.room-test:not(.target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); }
|
|
.scene:target-within:not(:target) > .room:not(:target-within) .test { opacity: 0; left: 999px; transition: translate 2s, opacity 1s, left step-end 1s; }
|
|
.scene.target-within:not(:target) > .room:not(.target-within) .test { opacity: 0; left: 999px; transition: translate 2s, opacity 1s, left step-end 1s; }
|
|
|
|
.room .test { transition: transform ease 2s, opacity 1s linear 1s, left step-end 1s; }
|
|
|
|
.object:target-within:before { opacity: 1; }
|
|
.object.target-within:before { opacity: 1; }
|
|
.object:before {
|
|
content: normal;/*"← back"; for hover only*/
|
|
border: thin solid brown;
|
|
background: white;
|
|
z-index: 999;
|
|
position: absolute;
|
|
transform: translate3d(0, -100%, 0);
|
|
opacity: 0;
|
|
transition: opacity 1s linear 1s;
|
|
pointer-events: none;
|
|
} |