suzanne.soy/SuzanneSoy.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use 3D translate, might improve perfs

Browse Source
This commit is contained in:
Suzanne Soy 2021-04-05 18:08:45 +01:00
parent 2eaca06518
commit cc3664f9be
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
test.css
View File

@ -9,17 +9,17 @@ html, body { height: 100%; overflow: hidden; }
left: 50%; left: 50%;
width: 100vmin; width: 100vmin;
height: 100vmin; height: 100vmin;
transform: translate(-50%, -50%) scale(1); transform: translate3d(-50%, -50%, 0) scale(1);
font-size: x-large; font-size: x-large;
} }
.scene .scene { .scene .scene {
transform: translate(-50%, -50%) scale(0.9); transform: translate3d(-50%, -50%, 0) scale(0.9);
overflow: hidden; overflow: hidden;
border: thin solid blue; border: thin solid blue;
} }
.scene .test2 .scene { transform: translate(-50%, -50%) scale(0.25); } .scene .test2 .scene { transform: translate3d(-50%, -50%, 0) scale(0.25); }
.three-d { .three-d {
position: absolute; position: absolute;
@ -64,12 +64,12 @@ html, body { height: 100%; overflow: hidden; }
.hover .hover { z-index: 40; } .hover .hover { z-index: 40; }
.hover:hover .hover:hover { z-index: 50; } .hover:hover .hover:hover { z-index: 50; }
.wall-l { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translateX(-50vmin) rotateY(90deg); } .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) translateX(50vmin) 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) translateY(-50vmin) rotateX(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) translateY(50vmin) 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) translateZ(-50vmin); } .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) translateZ(50vmin); .wall-f { opacity: 0.1; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, 0, 50vmin);
pointer-events: none; } pointer-events: none; }
.wall { pointer-events: none; } .wall { pointer-events: none; }
@ -84,7 +84,7 @@ html, body { height: 100%; overflow: hidden; }
.room-test:hover ~ .room .test2 { .room-test:hover ~ .room .test2 {
/*animation: fadeOut 1s;*/ /*animation: fadeOut 1s;*/
opacity: 0; opacity: 0;
left: 999px; left: 9999vmin;
transition: translate 2s, opacity 1s, left step-end 1s; 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 { transition: transform ease 2s, opacity 1s linear 1s, left step-end 1s; }
@ -125,7 +125,7 @@ html, body { height: 100%; overflow: hidden; }
background: white; background: white;
z-index: 999; z-index: 999;
position: absolute; position: absolute;
transform: translate(0, -100%); transform: translate3d(0, -100%, 0);
opacity: 0; opacity: 0;
transition: opacity 1s linear 1s; transition: opacity 1s linear 1s;
pointer-events: none; pointer-events: none;