test.css (15413B)
1 /* Temporary hack to place the main content above when the 3D stuff is not targetted */ 2 .view3d { z-index: 0; } 3 .view3d.target-within { z-index: 2; } 4 5 html { position: relative; padding:0; } 6 html, body { height: 100%; } 7 .view3d { width: 100%; height:100%; top: 0; left: 0; margin: 0; padding:0; /*overflow: hidden;*/ position: fixed; } 8 9 .scene { 10 position: absolute; 11 perspective: 100vmin; 12 opacity: 0.9; 13 top: 50%; 14 left: 50%; 15 width: 100vmin; 16 height: 100vmin; 17 transform: translate3d(-50%, -50%, 0) scale(1); 18 font-size: x-large; 19 } 20 21 /* 22 .scene .rest { background: black; } 23 .scene .scene .rest { background: white; } 24 .rest:hover { background: red; } 25 :target > .scene > .rest { display: none } 26 */ 27 28 #no .scene > .room { animation: 8s turntable infinite; animation-timing-function: ease; } 29 30 .scene .scene { 31 transform: translate3d(-50%, -50%, 0) scale(0.9); 32 /*overflow: hidden; bug in firefox which scrolls the element when the target changes, instead use clip-path */ 33 clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); 34 border: thin solid blue; 35 } 36 37 .scene .test2 .scene { transform: translate3d(-50%, -50%, 0) scale(0.25); } 38 39 .three-d { 40 position: absolute; 41 transition: transform ease 2s; 42 transform-style: preserve-3d; 43 top: 50%; 44 left: 50%; 45 } 46 47 .object { 48 border: thin solid red; 49 background: pink; 50 } 51 52 :root { 53 --origin: translate3d(-50%, -50%, -50vmin); 54 --origin-: translate3d(50%, 50%, 50vmin); 55 } 56 57 :root { 58 --test: translate3d(-49vmin, 0vmin, 0vmin) rotateY(90deg) scale(0.6); 59 --test-: rotateY(-90deg) translate3d(49vmin, 0vmin, 0vmin); 60 --test-hover: translate3d(0vmin,0,50vmin) rotateY(0deg) scale(1); 61 } 62 63 .test { width: 90vmin; height: 90vmin; transform: var(--origin) var(--test); } 64 .room:target-within > .test { transform: var(--origin) var(--test-hover); } 65 .room.target-within > .test { transform: var(--origin) var(--test-hover); } 66 67 :root { 68 --test2: translate3d(49vmin, 0vmin, 0vmin) rotateY(-90deg); 69 --test2-: rotateY(90deg) translate3d(-49vmin, 0vmin, 0vmin); 70 --test2-hover: translate3d(0,0,50vmin) rotateY(0deg); 71 } 72 73 .test { --scale: 0.6; } 74 .test2 { --scale: 1; } 75 76 :root { 77 --opacity: 1; 78 } 79 80 .test2 { width: 50vmin; height: 25vmin; transform: var(--origin) var(--test2); opacity: var(--opacity); } 81 .room:target-within > .test2 { transform: var(--origin) var(--test2-hover) scale(2); } 82 .room.target-within > .test2 { transform: var(--origin) var(--test2-hover) scale(2); } 83 84 .hover { z-index: 20; } 85 .hover:target-within { z-index: 30; } 86 .hover.target-within { z-index: 30; } 87 88 .hover .hover { z-index: 40; } 89 .hover:target-within .hover:target-within { z-index: 50; } 90 .hover.target-within .hover.target-within { z-index: 50; } 91 92 .wall-l { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(-50vmin, 0, 0) rotateY(90deg); } 93 .wall-r { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(50vmin, 0, 0) rotateY(-90deg); } 94 .wall-u { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, -50vmin, 0) rotateX(-90deg); } 95 .wall-d { opacity: 0.7; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, 50vmin, 0) rotateX(90deg); } 96 .wall-b { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, 0, -50vmin); } 97 .wall-f { opacity: 0.1; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, 0, 50vmin); 98 pointer-events: none; } 99 100 .wall { pointer-events: none; } 101 102 @keyframes turntable { 103 0% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(0deg) rotateY(-7deg) rotateX(-7deg); } 104 25% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(-3deg) rotateY(-3deg) rotateX(7deg); } 105 50% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(5deg) rotateY(7deg) rotateX(-7deg); } 106 75% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(-3deg) rotateY(3deg) rotateX(7deg); } 107 100% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(0deg) rotateY(-7deg) rotateX(-7deg); } 108 } 109 110 .room { transform: translate3d(0,0,0) rotate(0); } 111 .room-test:target-within ~ .room { transform: var(--origin) var(--test-hover) var(--test-) var(--origin-); } 112 .room-test.target-within ~ .room { transform: var(--origin) var(--test-hover) var(--test-) var(--origin-); } 113 .room-test:target-within ~ .room .test2 { opacity: 0; pointer-events: none; transition: translate 2s, opacity 1s, left step-end 1s; } 114 .room-test.target-within ~ .room .test2 { opacity: 0; pointer-events: none; transition: translate 2s, opacity 1s, left step-end 1s; } 115 .scene:target-within:not(:target) > .room:not(:target-within) .test { opacity: 0; pointer-events: none; transition: translate 2s, opacity 1s, left step-end 1s; } 116 .scene.target-within:not(:target) > .room:not(.target-within) .test { opacity: 0; pointer-events: none; transition: translate 2s, opacity 1s, left step-end 1s; } 117 .room .test2 { transition: transform ease 2s, opacity 1s linear 1s, left step-end 1s; } 118 .room .test { transition: transform ease 2s, opacity 1s linear 1s, left step-end 1s; } 119 .room-test2:target-within ~ .room { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } 120 .room-test2.target-within ~ .room { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } 121 122 :root { 123 --rainbow-saturation: 80%; 124 --rainbow-lightness: 40%; 125 --rainbow: linear-gradient( 126 45deg, 127 hsl(0, var(--rainbow-saturation), var(--rainbow-lightness)) 0%, 128 hsl(36, var(--rainbow-saturation), var(--rainbow-lightness)) 10%, 129 hsl(72, var(--rainbow-saturation), var(--rainbow-lightness)) 20%, 130 hsl(108, var(--rainbow-saturation), var(--rainbow-lightness)) 30%, 131 hsl(144, var(--rainbow-saturation), var(--rainbow-lightness)) 40%, 132 hsl(180, var(--rainbow-saturation), var(--rainbow-lightness)) 50%, 133 hsl(216, var(--rainbow-saturation), var(--rainbow-lightness)) 60%, 134 hsl(252, var(--rainbow-saturation), var(--rainbow-lightness)) 70%, 135 hsl(288, var(--rainbow-saturation), var(--rainbow-lightness)) 80%, 136 hsl(324, var(--rainbow-saturation), var(--rainbow-lightness)) 90%, 137 hsl(360, var(--rainbow-saturation), var(--rainbow-lightness)) 100%) 138 } 139 140 /* text in the center of a square filling its parent, semi-transparent white background with an opaque white band below the text. */ 141 .go { 142 background: rgba(255, 255, 255, 0.6); color: black; text-decoration: none; outline: thin solid white; 143 /*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));*/ 144 font-size: calc(130% / var(--scale)); transform-style: preserve-3d; z-index: 100; 145 line-height: 1.5em; text-align: center; position: absolute; top: 0; left: 0; width: auto; min-width: 100%; min-height: 1.5em; 146 /* trick to center the text position: absolute in the ::before, since we might want to animate this */ 147 /*padding-top: calc(50% - 1.5em - (1.5em / 2)); height: calc(100% - (50% - 1.5em - (1.5em / 2)));*/ 148 display: flex; 149 flex-direction: column; 150 justify-content: center; 151 height: calc(100% - 1.5em); 152 padding-bottom: 1.5em; 153 transition: var(--transition-to-forward); 154 flex-wrap: wrap; 155 flex-direction: row; 156 } 157 /* 158 mask-image: glitches, hides the 3D transform in Chromium 159 flex column: can't get 100% width; 160 flex row: incorrect order in back buttons; 161 bg gradient + opacity: opacity breaks 3D transforms 162 padding: works for squares but is relative to height 163 padding + direction: wrong dir for text 164 */ 165 166 /* semi-transparent on hover */ 167 .go:hover { background: rgba(255, 255, 255, 0.1); } 168 169 /* link is displayed in top left corner when the link goes out of the current room */ 170 /* back */ .target-within:not(:target) > .go { 171 border: thin solid black; background: white; color: black; outline: thin solid rgba(255,255,255,0); 172 min-width: 0%; height: 0%; font-size: 1rem; padding-bottom: 0; 173 /*transition: background 2s, width 1s step-start, height 1s step-start;*/ 174 transition: var(--transition-to-back); 175 } 176 177 .go { 178 --transition-duration: 0.6s; 179 --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; 180 --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; 181 --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; 182 } 183 184 /* ← 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. */ 185 .go::before { 186 content: '← back to '; 187 display: inline-block; position: relative; left: 0; width: auto; height: 1.5em; line-height: 1.5em; 188 } 189 #main > .go::before { content: '← back to start'; } 190 #main.target-within:not(:target) > .go { color: transparent; background: transparent; border-color: transparent; border-width: 0; } 191 #main.target-within:not(:target) > .go::before { border: thin solid black; background: white; } 192 #main.target-within > .go { border-width: 0; } 193 /* back */ .target-within:not(:target) > .go::before { 194 background: transparent; color: black; top: 0; min-width: 0; transition: var(--transition-to-back); } 195 /* current */ :target > .go::before { 196 background: transparent; color:transparent; z-index: -1; top: 50%; min-width: 100%; transition: var(--transition-to-current); } 197 /* forward: White band behind text */ 198 :not(.target-within) > .go::before { 199 background: white; color:transparent; z-index: -1; top: 50%; min-width: 100%; transition: var(--transition-to-forward); } 200 201 /* white band semi-transparent on hover */ 202 :not(.target-within) > .go:hover::before { background: rgba(255, 255, 255, 0.6); } 203 204 205 206 /* disable the link when it points to the current room */ 207 /*: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); }*/ 208 :target > .go { font-size: 1rem; background: transparent; color: transparent; border: thin solid transparent; outline-color: transparent; pointer-events: none; transition: var(--transition-to-current); } 209 210 /* animate colourful arrow and disable it when the target is in a nested room */ 211 :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; } 212 .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; } 213 214 /* animate position and gradient of colourful arrow on hover */ 215 .go:hover::after { --distance: calc(var(--min-distance) + var(--shift)); background-position-x: 25%; /* leave 25% for bounce easing */ } 216 217 /* draw colourful arrow */ 218 .go::after { 219 --width: 10; /* vmin */ 220 --shift: 8; /* vmin */ 221 --min-distance: 10; /* vmin */ 222 --distance: var(--min-distance); /* vmin, animated */ 223 --border: calc(var(--min-distance) + var(--shift)); /* vmin */ 224 --z: calc(((var(--width) - var(--border)) / 2 + var(--distance)) * 1vmin); 225 --arrow-width-ratio: calc(var(--width) / (var(--width) + var(--border))); 226 position: absolute; content: ''; top:50%; left: 50%; width: calc(var(--width) * 1vmin); height: calc(10vmin / var(--scale)); 227 --ease-out-bounce: cubic-bezier(0.3, 1.8, 0.9, 0.9); 228 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 */; 229 transform: translate3d(-50%, -50%, var(--z)) rotateY(45deg); 230 --arrow-thickness: 20%; 231 --arrowhead-position: 60%; 232 --arrowhead-angle: 51.34deg; 233 --bg: rgba(214, 93, 184, 0.5); 234 border-right: calc(var(--border) * 1vmin) solid transparent; 235 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%); 236 background-size: 400%; 237 background-position-x: 75%; /* leave 25% for bounce easing */ 238 background-repeat: no-repeat; 239 --vertical-triangle: calc(var(--arrowhead-position) * var(--arrow-width-ratio)); 240 --arrow-top: calc(50% - var(--arrow-thickness)); 241 --arrow-bottom: calc(50% + var(--arrow-thickness)); 242 --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)), 243 linear-gradient(90deg, transparent var(--vertical-triangle), black var(--vertical-triangle)), 244 linear-gradient(0deg, transparent var(--arrow-top), black var(--arrow-top), black var(--arrow-bottom), transparent var(--arrow-bottom)); 245 mask-image: var(--mask-image); 246 -webkit-mask-image: var(--mask-image); 247 mask-composite: intersect, add; 248 -webkit-mask-composite: destination-in, source-over; 249 } 250 251 /* Hide glitch where opacity on the parent breaks 3D even if the opacity is still at 1 during the first part of the animation. */ 252 .room-test.target-within ~ .room .go::after { opacity: 0; transition: opacity 1s step-start; } 253 .scene.target-within:not(:target) > .room:not(.target-within) .go::after { opacity: 0; transition: opacity 1s step-start; } 254 255 .rest { display: none; } 256 .hover-anim .rest { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 257 .scene:target-within:not(:target) > .room.room-test:not(:target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } 258 .scene.target-within:not(:target) > .room.room-test:not(.target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } 259 260 .object:target-within:before { opacity: 1; } 261 .object.target-within:before { opacity: 1; } 262 .object:before { 263 content: normal;/*"← back"; for hover only*/ 264 border: thin solid brown; 265 background: white; 266 z-index: 999; 267 position: absolute; 268 transform: translate3d(0, -100%, 0); 269 opacity: 0; 270 transition: opacity 1s linear 1s; 271 pointer-events: none; 272 }