nicht angemeldet
Danke!
Es funktioniert jezt so wie es mein Bekannter für den ich's mache warscheinlich akzeptier,
ab doch nicht so wie ich es ( siehe Kommentar am Beginn ) eigentlich wollte, DER Effekt ließe sich wohl auch einfacher erreichen; hab den Eindruck ich versteh noch einiges nicht richtig.
<!DOCTYPE html><html><head><meta charset='utf-8'> <style>
/* stark Modifiziert aus Vorlage: https://jsfiddle.net/puws394n/ */
/* Zeit | Anzeige a: 2t, Übergang zu b: 1t; Anzeige b: 2t, Übergang zu c: 1t;
ablauf | Anzeige c: 2t, Übergang zu a: 1t;
| Zyklus:9t, t = 11.11... % t = 40deg aber keine 40° Wegpunkte
VERSCHÜBE: FÜR height = 200px, w3 = Wurzel aus 3
WINKEL 0° | 120° | 240° |
z r=200w3/6=58 | -200w3/12 = -29 | wie 120° = 29 |
y 0 | 200/4 = 50 | -200$ = -50 |
0t..2t: A: 0° B: 120° C: 240°
2t..3t: A: -> 120° B: -> 240° C: -> 0°
3t..5t: A: 120° B: 240° C: 0°
5t..6t: A: -> 240° B:B -> 0° C: -> 120°
6t..7t:
=============================================================================*/
@keyframes orbitA {
00.00%{transform:rotate3d(1,0,0,000deg) translateZ( 58px) translateY( 00px)} /* 2t */
22.22%{transform:rotate3d(1,0,0,000deg) translateZ( 58px) translateY( 00px)} /* Verweil */
33.33%{transform:rotate3d(1,0,0,120deg) translateZ(-29px) translateY( 50px)} /*flott b */
55.56%{transform:rotate3d(1,0,0,120deg) translateZ(-29px) translateY( 50px)} /* 2t wart */
66.67%{transform:rotate3d(1,0,0,240deg) translateZ(-29px) translateY(-50px)} /* flott c */
99.99%{transform:rotate3d(1,0,0,240deg) translateZ(-29px) translateY(-50px)} /* 2t wart */
}
@keyframes orbitB {
00.00%{transform:rotate3d(1,0,0,120deg) translateZ(-29px) translateY( 50px)} /* 2t */
22.22%{transform:rotate3d(1,0,0,120deg) translateZ(-29px) translateY( 50px)} /* Verweil */
33.33%{transform:rotate3d(1,0,0,240deg) translateZ(-29px) translateY( 50px)} /*flott c */
55.56%{transform:rotate3d(1,0,0,240deg) translateZ(-29px) translateY(-50px)} /* 2t wart */
66.67%{transform:rotate3d(1,0,0,360deg) translateZ( 58px) translateY( 00px)} /* flott a */
99.99%{transform:rotate3d(1,0,0,360deg) translateZ( 58px) translateY( 00px)} /* 2t wart */
}
@keyframes orbitC {
00.00%{transform:rotate3d(1,0,0,240deg) translateZ(-29px) translateY(-50px)} /* 2t */
22.22%{transform:rotate3d(1,0,0,240deg) translateZ(-29px) translateY(-50px)} /* Verweil */
33.33%{transform:rotate3d(1,0,0,360deg) translateZ( 58px) translateY( 00px)} /*flott b */
55.56%{transform:rotate3d(1,0,0,360deg) translateZ( 58px) translateY( 00px)} /* 2t wart */
66.67%{transform:rotate3d(1,0,0,120deg) translateZ(-29px) translateY( 50px)} /* flott c */
99.99%{transform:rotate3d(1,0,0,120deg) translateZ(-29px) translateY( 50px)} /* 2t wart */
}/****************************************************************************/
/*ALLE PIXELANGABEN(px) SOLLTEN EIGENTLICH
'em'-Angaben oder sonstige fontabhängige sein
*/
.prisma { /* Koordinatenbasis für .a .b .c */
width: 500px; height: 200px; /* AUF NAMENSKONFLIKTE ACHTEN !! */
position:absolute; top: 100px; left: 100px; /* Dimensionierung nicht */
background: rgba(100,100,100,0.4); /* kleiner als für .a,.b,.c */
}
.a { background: red ; animation: orbitA 36s infinite linear; /* 36s */
} /* Zyk- */
.b { background: lawngreen ;animation: orbitB 36s infinite linear; /* lus- */
} /* dauer */
.c { background: lightblue ; animation: orbitC 36s infinite linear;
}
.a{ transform: rotate3d(1,0,0, 0deg) translateZ( 58px) translateY( 0px) ;}
.b{ transform: rotate3d(1,0,0,120deg) translateZ(-29px) translateY( 50px) ;}
.c{ transform: rotate3d(1,0,0,240deg) translateZ(-29px) translateY(-50px) ;}
.a ,
.b , .c{ text-align: center;transform-style: preserve3d;/* Dimensione nicht */
width: 500px; height: 200px; /* kleiner als für */
position: absolute; top: 0; left:0; /* .prisma */
display: flex; flex-flow: column nowrap; justify-content: center;
backface-visibility: hidden;
}
</style> <!--===============================================================-->
</head>
<body>
<div class="prisma">
<div class="a">VERSTEHEN SIE SPASS ?</div>
<div class="b">Hier könnte Ihre Werbung stehen</div>
<div class="c">Werbefläche</div>
</div></body>
</html>
Rolf B
JürgenB
Gunnar Bittersmann
Matthias Apsel
Matthias Scharwies