nicht angemeldet
ich glaub, ich kann das jetzt abschließen;
die nun gefundene Lösung war nötig, da es wohl noch Browser gibt, die für jedes Element
in einem Container dessen ganzer Inhalt auf gleiche Weise transformiert werden soll einen Extra keyframe benötigen.
Vorallem die richtigen Werte für orbitC zu finden war aufreibend.
Ich bezweifle, daß für größere Collections und mehr Wegpunkte befriedigende Performance erreichbar ist. Und dann möglicherweise die Keyframes noch mehrmals mit Prefixen ...
<!DOCTYPE html> <head><meta charset='utf-8'> <style>
@keyframes orbitA {
from { transform: rotateX( 0deg)translateZ(4.16em);} /* die z-Werte er- */
16.7% { transform: rotateX( 0deg)translateZ(4.16em);} /* geben sich aus */
33.0% { transform: rotateX(120deg)translateZ(4.16em);} /* height */
49.7% { transform: rotateX(120deg)translateZ(4.16em);} /* *WurzelAus3 / 6 */
66.0% { transform: rotateX(240deg)translateZ(4.16em);}
83.7% { transform: rotateX(240deg)translateZ(4.16em);}
to { transform: rotateX(360deg)translateZ(4.16em);} }
@keyframes orbitB {
from { transform: rotateX(120deg)translateZ(4.16em);}
16.7% { transform: rotateX(120deg)translateZ(4.16em);}
33.0% { transform: rotateX(240deg)translateZ(4.16em);}
49.7% { transform: rotateX(240deg)translateZ(4.16em);}
66.0% { transform: rotateX(360deg)translateZ(4.16em);}
83.7% { transform: rotateX(360deg)translateZ(4.16em);}
to { transform: rotateX(480deg)translateZ(4.16em);} }
@keyframes orbitC {
from { transform: rotateX(-120deg)translateZ(4.16em);}
16.7% { transform: rotateX(-120deg)translateZ(4.16em);}
33.0% { transform: rotateX( 0deg)translateZ(4.16em);}
49.7% { transform: rotateX( 0deg)translateZ(4.16em);}
66.0% { transform: rotateX( 120deg)translateZ(4.16em);}
83.7% { transform: rotateX( 120deg)translateZ(4.16em);}
to { transform: rotateX( 240deg)translateZ(4.16em);} }
/****************************************************************************/
/* !!! NAMENSKONFLIKTE !!!
!!!!!! VERMEIDEN !!!!!!
*/
.schaufenster { width: 36em; height: 14.4em; /* Dimensionierung nicht */
/* kleiner als für .a,.b,.c */
height:14.4em;
position:absolute; top: 100px; left: 100px; /* bezogen auf Umgebung */
background: rgba(100,100,100,0.2); /* die 0.2 gewähren Durchsichtigkeit */
transform: perspective(1200px) rotateY(45deg); transform-style:preserve-3d;
border: 3px solid black;
}
.a ,
.b , .c {text-align: center; width: 36em; height:14.4em;
position: absolute; top: 0; left:0; /* flex damit */
display: flex; /* auch verti- */
flex-flow: column nowrap; justify-content: center; /* kal zentriert*/
xbackface-visibility: hidden;
}
.a {background: red; animation: orbitA 30s infinite ease-in-out ;
transform-style: preserve-3d;
}
.b {background:lawngreen; animation: orbitB 30s infinite ease-in-out;
transform-style: preserve-3d;
}
.c {background:lightblue;animation: orbitC 30s infinite ease-in-out ; /* 12 Umlauf */
transform-style: preserve-3d;}
</style></head><body>
<!--========================================================================-->
<div class="schaufenster">
<!-- Inhalte je -->
<!-- --><div class="a">VERSTEHEN SIE SPASS ?</div> <!-- nach Wunsch -->
<!-- --><div class="b">Hier könnte Ihre Werbung stehen</div>
<!-- --><div class="c">Werbefläche</div>
<!-- --></div>
</div><!--===========================================================--></body>
<!-- MIT FREUNDLICHER HILFE DURCH
https://forum.selfhtml.org/self/2017/oct/20/3d-animation/1706725#m1706725 -->
</html>
Rolf B
JürgenB
Gunnar Bittersmann
Matthias Apsel
Matthias Scharwies