时间戳

首页 > 解决方案 > 此 3d 横幅在 Internet Explorer 上无法正常工作

html - 此 3d 横幅在 Internet Explorer 上无法正常工作

问题描述

此滚动 3D 立方体示例在 Internet Explorer 上无法正常工作。

必须像其他浏览器一样进行 360 度旋转。

缺少哪些供应商前缀？

提交帖子的随机文本 insted 更多细节 提交帖子的随机文本 insted 更多细节 提交帖子的随机文本 insted 更多细节 提交帖子的随机文本 insted 更多细节 提交帖子的随机文本 insted 更多细节 提交帖子的随机文本insted of more details 用于提交帖子的随机文本 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>

标签： htmlcssinternet-explorer

解决方案

看看这里：https ://caniuse.com/#search=perspective

正如他们所说perspective，它得到了 ie 的部分支持：

IE中的部分支持是指不支持transform-style:preserve-3d属性。这可以防止嵌套 3D 变换元素。

您将不得不使用另一种方法，即。

相关帖子：Internet Explorer CSS 中的 Transform-Style preserve-3d 不起作用

希望这有帮助

推荐阅读