/* overschieMul.css stijlblad voor Overschiemulatoren op Nagedi.nl */ * { box-sizing: border-box; margin: 0; padding: 0; } body { overflow: hidden; } /* ----------------------------------------------------------------------------------- */ /* TEST voor CSS variabelen - op te vragen met var( --main-bg-color ) bijvoorbeeld :root kan ook het body element zijn en kan ook met javascript benaderd worden. :root { --main-bg-color: coral; } */ /* ----------------------------------------------------------------------------------- */ #dv3Druimte { position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; perspective-origin: initial; /* 55% 60%; */ perspective: 150px; /* was 350 */ /* TEST om GPU te activeren */ transform: translateZ( 0.01px ); /* voor FirFox, Chrome volstaat met 0 */ } #dvLinks { position: absolute; display: flex; /* !!! zorgt voor automatische breedte aanpassing op grond van inhoud */ width: auto; /*100%;*/ height: 100%; top: 0; left: 0; /*padding: 50px;*/ transform-origin: left 50% 0px; transform: rotateY( 90deg ); transform-style: preserve-3d; /* alleen voor test doeleinden */ /*background-color: #778899; */ /* LightSlateGray */ /*transform: translateZ( 0.01px );*/ /* dit heft 3d op... */ } #dvLinks img { /*display: inline-block;*/ margin: 0; padding: 0; height: 99.9% ; /*100% geeft in FireFox psychedelische effecten! */; /*background-color: green; */ /*background-color: transparent;*/ transition: margin-left /*10s*/; transition-timing-function: linear; /* TEST om GPU te activeren. Absoluut noodzakelijk in chrome versies ! FireFox blijft horten en stotteren! */ transform: translateZ( 0.01px ) /*rotateY( -60deg ) */; } #dvRechts { position: absolute; display: flex; /* !!! zorgt voor automatische breedte aanpassing op grond van inhoud */ flex-direction: row-reverse; /* !! en omgekeerde volgorde */ /* width: 100%; */ height: 100%; top: 0; right: 0; /* padding: 60px; */ transform-origin: right 50% 0px; /* X Y Z */ transform: rotateY( -90deg ) ; transform-style: preserve-3d; /* background-color: green; */ /* alleen voor test weergave */ /*transform: translateZ( 0.01px );*/ /* heft 3d op voor alle volgende html elementen */ } #dvRechts img { /*display: inline-block; */ /* inline-block; */ margin: 0; padding: 0; height: 99.9% ; /*100% geeft in FireFox psychedelische effecten! */ /*float: right;*/ /*background-color: red; */ /* nodif voor Brave voor correcte volgorde op Z-as in 3D maar geeft wisselnde zwARTE BALKEN */ /*background-color: transparent;*/ transition: margin-right /*10s*/; transition-timing-function: linear; /* TEST om GPU te activeren. Absoluut noodzakelijk in chrome versies ! */ /* FireFox blijft horten en stotteren! */ transform: translateZ( 0.01px ) /* rotateY( 50deg ) */ ; } /* TEST voor 180grd verticaal draaien via tweede div met Zas en org in midden Werkt! in feite zijn er nu twee transitie-origins */ #dvBodemX180 { position: absolute; width: 100%; bottom: 0; transform-style: preserve-3d; transform-origin: top; transform: /*translateZ( 0.01px )*/ rotateX( 90deg ); /* verticale div naar horizontale weergave */ } /* TEST binnendiv met fotoos en Zas in midden voor rotatie */ #dvBodem { position: absolute; display: flex; flex-direction: column-reverse; width: 100%; bottom: 0; /*transform-style: preserve-3d;*/ transform-origin: bottom; /* 50% 50% 0; */ transform: translateZ( 0.01px ) rotateX( 90deg ) /* rotateZ( 180deg )*/ ; /* top naar onderkant draaien zodat img 0 onderaan zit */ /*background-color: grey;*/ } #dvBodem img { display: block; margin: 0; padding: 0; width: 99.9%; /* height: 99.9% ; */ /*100% geeft in FireFox psychedelische effecten! */ transition: margin-bottom /*10s*/; transition-timing-function: linear; /*background-color: blue; /*nodig voor FireFox anders psychedelische popart */ /*background-color: transparent;*/ /* 180 gr gedraaide imgs weer 180 gr verdraaien */ transform: translateZ( 0.01px ) /* rotateZ( 180deg )*/ ; /* LET OP! img top en bottom properties draaien NIET mee ! */ /* translateZ() noodzakelijk voor vloeinder verloop in Brave, FireFox en Chromium */ } #tkstR { position: absolute; top: 200px; right: 50px; } #tekstR { position: absolute; right: 0; top: 150px; font-size: 36px; color: red; background-color: yellow; } #wolk { position: absolute; width: 100%; height: 100%; /*60%;*/ top: 0px; left: 0px; } #boeing { position: absolute; top: 0; left: 0; height: 100%; width: 100%; /* z-index: 50;*/ } #b747 { position: absolute; top: 20%; left: 84%; background-color: transparent; /* blue; */ transform: translateZ( -2500px ); animation-name: b747heen; animation-duration: 25s; animation-delay: 1s; animation-timing-function: /*steps( 500 ); */ /*linear; */ ease-in; animation-iteration-count: infinite; animation-direction: normal; /* normal, reverse, alternate */ } @keyframes b747heen { 100% { transform: rotateZ( -25deg ) translateZ( 120px ); left: 15%; top: -6%; } /* oorspronkelijke frame */ /*100% { transform: rotateZ( -25deg ) translateZ( 120px ) translateX( -800px) translateY( -300px ); } */ } #b747b1 { position: relative; margin: 0px; padding: 0px; left: 110%; /* 100%; */ top: -45%; /* -60%; */ transform: rotateY( 180deg ) rotateZ( -10deg) translateZ( 120px ); animation-name: b747weer; animation-duration: 16s; animation-delay: 2s; animation-timing-function: /*steps( 500 ); */ ease-in; /* linear; */ animation-iteration-count: infinite; animation-play-state: paused; animation-direction: normal; /* normal, reverse, alternate */ } @keyframes b747weer { 100% { transform: translateZ( -400px ) rotateY( 180deg ) rotateZ( -10deg); left: -170px; top: -70px; } } #b747b2 /* de 747 met shuttle maar zonder jagers */ { position: relative; margin: 0px; padding: 0px; left: 118%; top: -35%; transform: rotateY( 180deg ) rotateZ( -10deg) translateZ( 100px ); animation-name: b747weer2; animation-duration: 30s; animation-delay: 3s; animation-timing-function: /*steps( 500 ); */ ease-in; /* linear; */ animation-iteration-count: infinite; animation-play-state: paused; animation-direction: normal; /* normal, reverse, alternate */ } @keyframes b747weer2 { 100% { transform: translateZ( -380px ) rotateY( 180deg ) rotateZ( -10deg); left: -450px; top: -50px; } } /* div met dashboard */ #omvanPosORIGINEEL { position: absolute; overflow: hidden; width: 110%; height: 110%; margin: 0; padding: 0; top: -25px; /* 0px; */ left: -30px; } #omvanPos { position: absolute; overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; top: 0; left: 0; } /* plaatje voor illusie van dashboard of cockpit */ #vanPos { width: 150%; height: 135%; top: 0; left: -170px; } /* TEST animatie status weergeven */ #dvStatus { position: absolute; top: 40px; left: 90px; color: white; background-color: green; font-size: 2em; }