此滚动 3D 立方体示例无法在 Internet Explorer 上正常运行。
必须像其他浏览器一样进行 360 度旋转。
缺少哪些供应商前缀？
用于提交更多详细信息的帖子的随机文本 用于提交更多详细信息的帖子的随机文本 用于提交更多详细信息的帖子的随机文本 用于提交更多详细信息的帖子的随机文本 用于提交更多详细信息的帖子的随机文本 用于提交更多详细信息的帖子的随机文本 用于提交更多详细信息的帖子的随机文本
/* 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>
最佳答案
看看这里:https://caniuse.com/#search=perspective
正如他们所说的perspective，ie 部分支持它:
IE部分支持是指不支持transform-style: preserve-3d属性。这可以防止嵌套 3D 转换元素。
您将不得不为 ie 使用另一种方法。
相关帖子:Transform-Style preserve-3d in internet explorer CSS not working
希望对你有帮助
关于html - 此 3d 横幅在 Internet Explorer 上无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56966227/