This 3d banner does not working correctly on Internet Explorer

Question

This sample of rolling 3D cube does not work correctly on Internet Explorer.

There is must be rotation on 360 degrees like in other browsers.

Which of vendor prefixes are missing?

random text for submitting post insted of more details random text for submitting post insted of more details random text for submitting post insted of more details random text for submitting post insted of more details random text for submitting post insted of more details random text for submitting post insted of more details random text for submitting post insted of more details

/* animation speed */
.container { 
    -webkit-animation: rotate 18s infinite linear; 
    animation: rotate 18s infinite linear; 
}
/* native */
.cube { transform:scaleX(.7) scaleY(.7); }
* { margin:0; padding:0; outline:none; box-sizing: border-box; }
.stage { width:240px; height:360px; overflow:hidden; }
.cube { 
    width:240px; 
    height:400px;
    margin-top:-20px;
    -ms-perspective:1000px; 
    -webkit-perspective: 1000px; 
    perspective: 1000px;
    -ms-perspective-origin: center center;
    -webkit-perspective-origin: center center;
    perspective-origin: center center; 
 }
.container { 
    display:block; 
    width: 240px; 
    height: 400px; 
    -ms-transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
}
.side { 
    display:block; 
    position: absolute; 
    width: 240px; 
    height: 400px; 
    background-position:center center; 
    background-repeat:no-repeat; 
    background-size:cover;
}
.face1 { 
    -webkit-transform: translateZ(120px); 
    transform: translateZ(120px);
    background-color: green;
} 
.face2 { 
    -webkit-transform: translateX(120px) rotateY(90deg); 
    transform: translateX(120px) rotateY(90deg); 
    background-color: red;
}
.face3 { 
    -webkit-transform: translateZ(-120px) scale(-1, 1); 
    transform: translateZ(-120px) scale(-1, 1);
    background-color: teal;
} 
.face4 {
    -webkit-transform: translateX(-120px) rotateY(90deg) scale(-1, 1); 
    transform: translateX(-120px) rotateY(90deg) scale(-1, 1); 
    background-color: black;
}

@-webkit-keyframes rotate { 100% { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); } }
@keyframes rotate { 100% { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); } }
</style>
</head>
<body cz-shortcut-listen="true">
<div class="stage">
<div class="cube">
<a class="container" href="">
<span class="face1 side"></span>
<span class="face2 side"></span>
<span class="face3 side"></span>
<span class="face4 side"></span>
</a>
</div>
</div>
</body></html>

Stackoverflow isn't a quiz website, please explain what steps you tried to fix the issue, did you check if all CSS rules are IE compatible? What version of IE are you trying to make this work in? Instead of random filler text, provide actual details. That's what the threshold is for to even post something. — Arno Tenkink, Jul 10 '19 at 08:36
In IE-11, vendor prefixes are added. I don`t know what details must be added. Block works on all browsers and does not works in IE. — KahjuksEi, Jul 10 '19 at 08:45

Mathias Nicod · Answer 1 · 2019-07-10T09:10:20.960

1

Have a look here : https://caniuse.com/#search=perspective

As they say for perspective, it is partially supported by ie :

Partial support in IE refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.

You will have to use another method for ie.

Related post : Transform-Style preserve-3d in internet explorer CSS not working

Hope this help

edited Jul 10 '19 at 09:10

answered Jul 10 '19 at 08:49

Mathias Nicod

130
12

score 0 · Answer 2 · answered Jul 10 '19 at 09:03

As it is already suggested by other community member that transform-style preserve-3d is not supported in IE.

You can Work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.

Reference:

Internet Explorer Preserve 3D fix

This 3d banner does not working correctly on Internet Explorer

2 Answers2