8
Ich habe gerade versucht, Code zu verwenden, der einen animierten 3D-Würfel erstellt und ein Video auf jeder Seite des Würfels platziert, aber aus irgendeinem Grund sind einige Seiten des Würfels immer oben von den anderen, auch wenn sie überhaupt nicht sichtbar sein sollten, besonders beim Abspielen der Videos.
Hier ist eine Demo btw:
http://codepen.io/anon/pen/NqxRKQ
HTML:CSS3 3D Cube wird nicht korrekt in Internet Explorer angezeigt
<div id="box">
<div class="box">
<div class="side side1">
<iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
</div>
<div class="side side2">
<iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
</div>
<div class="side side3">
<iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
</div>
<div class="side side4">
<iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
</div>
<div class="side side5">
<iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
</div>
<div class="side side6">
<iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
CSS:
body {
background-color: #666;
color: #FFF;
}
h2 {
color: #FFF;
}
a {
color: #F7E309;
}
#box {
width: 300px;
margin: 50px;
-webkit-perspective: 600px;
perspective: 600px;
}
.box {
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
color: #111;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.box div {
position: absolute;
text-align: center;
left: 0;
top: 0;
width: 300px;
height: 300px;
line-height: 300px;
font-size: 3em;
font-weight: bold;
transform-origin: 50% 50% -150px;
-webkit-transform-origin: 50% 50% -50px;
/* -webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;*/
}
.box .side1 {
background: hsla(0, 100%, 50%, 0.8);
-webkit-animation: animate1 12s infinite linear;
animation: animate1 12s infinite linear;
}
.box .side2 {
background: hsla(60, 100%, 50%, 0.8);
-webkit-animation: animate2 12s infinite linear;
animation: animate2 12s infinite linear;
}
.box .side3 {
background: hsla(120, 100%, 50%, 0.8);
-webkit-animation: animate3 12s infinite linear;
animation: animate3 12s infinite linear;
}
.box .side4 {
background: hsla(180, 100%, 50%, 0.8);
-webkit-animation: animate4 12s infinite linear;
animation: animate4 12s infinite linear;
}
.box .side5 {
background: hsla(240, 100%, 50%, 0.8);
-webkit-animation: animate5 12s infinite linear;
animation: animate5 12s infinite linear;
}
.box .side6 {
background: hsla(300, 100%, 50%, 0.8);
animation: animate6 12s infinite linear;
-webkit-animation: animate6 12s infinite linear;
}
/* for Chrome and Chrome */
@-webkit-keyframes animate1 {
0% {
-webkit-transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}
100% {
-webkit-transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);
}
}
@-webkit-keyframes animate2 {
0% {
-webkit-transform: perspective(600px) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
}
100% {
-webkit-transform: perspective(600px) rotateX(360deg) rotateY(630deg) rotateZ(0deg);
}
}
@-webkit-keyframes animate3 {
0% {
-webkit-transform: perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
}
100% {
-webkit-transform: perspective(600px) rotateX(450deg) rotateY(0deg) rotateZ(-360deg);
}
}
@-webkit-keyframes animate4 {
0% {
-webkit-transform: perspective(600px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
100% {
-webkit-transform: perspective(600px) rotateX(270deg) rotateY(0deg) rotateZ(360deg);
}
}
@-webkit-keyframes animate5 {
0% {
-webkit-transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
-webkit-transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(0deg);
}
}
@-webkit-keyframes animate6 {
0% {
-webkit-transform: perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}
100% {
-webkit-transform: perspective(600px) rotateX(360deg) rotateY(540deg) rotateZ(0deg);
}
}
/* for Firefox and IE10 */
@keyframes animate1 {
0% {
transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}
100% {
transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);
}
}
@keyframes animate2 {
0% {
transform: perspective(600px) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
}
100% {
transform: perspective(600px) rotateX(360deg) rotateY(630deg) rotateZ(0deg);
}
}
@keyframes animate3 {
0% {
transform: perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: perspective(600px) rotateX(450deg) rotateY(0deg) rotateZ(-360deg);
}
}
@keyframes animate4 {
0% {
transform: perspective(600px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: perspective(600px) rotateX(270deg) rotateY(0deg) rotateZ(360deg);
}
}
@keyframes animate5 {
0% {
transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(0deg);
}
}
@keyframes animate6 {
0% {
transform: perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}
100% {
transform: perspective(600px) rotateX(360deg) rotateY(540deg) rotateZ(0deg);
}
}
In IE 11:
In Firefox:
Meine Frage: Wie kann ich das beheben?
@isherwood IE unterstützt keine 3D-Ansicht oder Rückseiten-Sichtbarkeit, unterstützt aber grundlegende 3-d – vals
Microsoft Edge, Internet Explorer-Nachfolger, unterstützt 'preserve-3d'. – Sampson