Frage stellen
ich sitzte nun seit ca. 4 Stunden an dem Problem und bin vollkommen am verzweifeln
Ich möchte über einem Video eine 3D Transformation eines simplen DIVs machen aber obwohl der z-Index richtig gesetzt ist, wird trotzdem das Video immer im Vordergrund angezeigt.
Das Beispiel ist nur für Safari gedacht. Ich habe die neuste Version (5.03) auf Mac im Einsatz!
- <html>
<style type="text/css">
<!--
.infobox {
color:white;
-webkit-transform: perspective(800) rotateX(45deg);
border:1px solid white;
}
-->
</style>
</html>
<body style="background-color:black">
<video style="position:absolute;left:50px;top:100px;z-index:200" src="back/tunnel.mp4" width="200"></video>
<div class="infobox" style="position:absolute;left:50px;top:100px;width:200px;z-index:300;" >
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<body>
URL mit Beispiel: http://test100.flyingdog.de/test/3dtest.html
Modifiziere ich das HTML ein wenig, so dass anstatt "video" ein "img" genommen wird, funktioniert es:
siehe: http://test100.flyingdog.de/test/3dtest2.html
Modifiziere ich das HTML ein wenig, so dass zwar ein Video aber keine 3D Transformation genommen wird, funktioniert es auch:http://test100.flyingdog.de/test/3dtest3.html
Absolut unverständlich ist es mir auch, wenn ich z.B. den Code aus dem 2. Beispiel (also ein Bild) mit dem vom ersten Beispiel mixe. Dann wird auch das Bild über die 3D Transformation gelegt. Also nachdem ein Video eingebunden wurde, funktioniert das Bild auch nicht mehr richtig im z-Index.
Ein Webkit/Safari Bug ? Ein Workaround wäre echt voll super!
Vielen Dank!!!!!!