nicht angemeldet
ok, hier mein vorläufiger, darauf bauender Ansatz ( WARUM KLAPPT DAS vertical-align nicht ?)
<!DOCTYPE html><meta charset='utf-8'><html><head>
<style>
@keyframes orbit1 {
from { transform: /*perspective(3000px)*/ rotate3d(1, 0, 0, 0deg) translateZ(29px)}
to { transform: /*perspective(3000px)*/ rotate3d(1, 0, 0, 360deg) translateZ(29px) }
}
@keyframes orbit2 {
from { transform: /*perspective(3000px)*/ rotate3d(1, 0, 0, 0deg) rotate3d(1, 0, 0, 120deg) translateZ(29px)}
to { transform: /*perspective(3000px)*/ rotate3d(1, 0, 0, 360deg) rotate3d(1, 0, 0, 120deg) translateZ(29px) }
}
@keyframes orbit3 {
from { transform: /*perspective(3000px)*/ rotate3d(1, 0, 0, 0deg) rotate3d(1, 0, 0, 240deg) translateZ(29px)}
to { transform: /*perspective(3000px)*/ rotate3d(1, 0, 0, 360deg) rotate3d(1, 0, 0, 240deg) translateZ(29px) }
}
.prisma div {
width: 500px; height: 200px; font-size: 1em;
position:absolute; top: 50px; left: 100px;
backface-visibility: hidden;
}
.a { background-color: red; animation: orbit1 10s infinite linear;
transform-style: preserve3d;
}
.b { background-color: lightblue; animation: orbit3 10s infinite linear;
transform-style: preserve3d;
}
.c { background-color: green; animation: orbit2 10s infinite linear;
transform-style: preserve3d;
}
.a { transform: rotate3d(1, 0, 0, 0deg) }
.b { transform: rotate3d(1, 0, 0, 120deg) }
.c { transform: rotate3d(1, 0, 0, 240deg) }
.a ,
.b , .c{ border: 5px solid yellow; text-align: center;
display: table-cell; vertical-align: middle;}
</style> <!--====================================================================-->
</head>
<div class="prisma">
<div class="a">WIRBLER & MIRBLER</div>
<div class="b">Hier könnte Ihre Werbung stehen</div>
<div class="c">Werbefläche</div>
</div>
</html>
Rolf B
JürgenB
Gunnar Bittersmann
Matthias Apsel
Matthias Scharwies