javascript - css 动画不适用于 Internet Explorer 浏览器(转换)
问题描述
我创建了一个 CSS 动画(变换和关键帧)来旋转立方体。
但是,它不适用于 Internet Explorer 浏览器。
我还尝试了供应商前缀 (-ms-)。
但这不是解决方案。
这是项目要求的要求,如果不可能,必须考虑另一种解决方案。
是否可以使用 Internet Explorer 浏览器进行这项工作?
https://jsfiddle.net/1acjLn53/
HTML
<div class="cube">
<div class="container">
<div class="side m--1"></div>
<div class="side m--2"></div>
<div class="side m--3"></div>
<div class="side m--4"></div>
<div class="side m--5"></div>
<div class="side m--6"></div>
</div>
</div>
CSS
.cube {
overflow: hidden;
position: relative;
top: 0;
height: 126px;
width: 126px;
}
.container {
-webkit-animation: rotation 6s infinite;
animation: rotation 6s infinite;
margin: auto;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
height: 56px;
top: 50px;
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
width: 56px;
}
.container > div {
float: left;
overflow: hidden;
position: absolute;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
height: 56px;
width: 56px;
}
.side.m--1 {
background-color: #ccc;
-webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(28px);
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(28px);
}
.side.m--2 {
background-color: #aaa;
-webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(28px);
transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(28px);
}
.side.m--3 {
background-color: #888;
-webkit-transform: translateX(0px) translateY(0px) translateZ(28px);
transform: translateX(0px) translateY(0px) translateZ(28px);
}
.side.m--4 {
background-color: #aaa;
-webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(28px);
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(28px);
}
.side.m--5 {
background-color: #888;
-webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(28px);
transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(28px);
}
.side.m--6 {
background-color: #ccc;
-webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(28px);
transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(28px);
}
@-webkit-keyframes rotation {
0% {
-webkit-transform: rotateX(-0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
25% {
-webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
}
50% {
-webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg);
transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg);
}
75% {
-webkit-transform: rotateX(270deg) rotateY(270deg) rotateZ(90deg);
transform: rotateX(270deg) rotateY(270deg) rotateZ(90deg);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg);
transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg);
}
}
@keyframes rotation {
0% {
-webkit-transform: rotateX(-0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
25% {
-webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
}
50% {
-webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg);
transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg);
}
75% {
-webkit-transform: rotateX(270deg) rotateY(270deg) rotateZ(90deg);
transform: rotateX(270deg) rotateY(270deg) rotateZ(90deg);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg);
transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg);
}
}
解决方案
推荐阅读
- tcp - Is it possible to load balance MQTT traffic with Traefik 2.0 TCP feature?
- php - 如何修复“Laravel 中间件清除请求标头”
- python-3.x - 如何调整 .mhd 文件的查看窗口以更好地查看医学图像?
- typescript - TypeScript Lerna/MonoRepo Webpack 开发速度/优化
- c# - 你能把这 2 个 IfElse 语句转换为 1
- google-chrome-extension - Chrome 扩展程序:如何在从 background.js 自动填写表单后捕获弹出消息?
- applescript - AppleScript: How to make a "type class" with four zero-byte values?
- python - 如何加载 Seq2Seq 模型并使用它?
- c# - 在 C# 中创建正则表达式
- html - 我可以选择一个以“#”开头的 id