CSS3 变换透视在 FF 或 IE 中不起作用 - 摇摆效果答案

【问题标题】：CSS3 Transform Perspective Not Working in FF or IE - Swing EffectCSS3 变换透视在 FF 或 IE 中不起作用 - 摇摆效果
【发布时间】：2013-07-30 13:23:47
【问题描述】：

我对 CSS3 变换和关键帧动画比较陌生，因此倾向于坚持使用 CSS 生成器或翻录其他示例。我出于自己的目的修改了此处显示的示例，该示例在 Chrome 中效果很好，但在 FF 或 IE 中效果不佳 - http://webbb.be/blog/making-a-swinging-effect-with-css3-animations/。

请参阅下面的示例（包括 js fiddle），本质上这是使用透视对悬停产生的摆动效果，但透视似乎在 FF 和 IE 中不起作用。我只添加了 -moz-pre 修复下面的例子......有什么想法吗？

a  {  display: block;
float:left;
text-indent: -999px;
overflow: hidden;
height: 100px;
width: 100px;
background: red;
cursor: pointer;

}

.perspective { 
position: relative; 
-webkit-perspective: 350;
-moz-perspective: 350;
width: 100px;
height: 100px;
}

.perspective .swing {
position: relative; 
z-index:1;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
}

a.swing:hover {
-webkit-transform-origin: top;
-moz-transform-origin: top;
-webkit-animation: balance 1.5s ease-in-out 110ms 1 alternate;
-moz-animation: balance 1.5s ease-in-out 110ms 1 alternate;
}


@-webkit-keyframes balance { 
25% { -webkit-transform: rotateX(-60deg); }  
45% { -webkit-transform: rotateX(50deg); } 
69% { -webkit-transform: rotateX(-30deg); } 
90% { -webkit-transform: rotateX(30deg); } 
100% { -webkit-transform: rotateX(0deg);} 
}


@-moz-keyframes balance { 
25% { -moz-transform: rotateX(-60deg); }  
45% { -moz-transform: rotateX(50deg); } 
69% { -moz-transform: rotateX(-30deg); } 
90% { -moz-transform: rotateX(30deg); } 
100% { -moz-transform: rotateX(0deg);} 
}

http://jsfiddle.net/7ejF7/1/

【问题讨论】：

标签： css transform perspective

【解决方案1】：

您需要为透视图添加 px 值才能在非 webkit 浏览器上工作。

-moz-perspective: 350px;

http://jsfiddle.net/mZMGd/

【讨论】：

只是为了确认您不需要 moz 前缀...适用于 IE10、FF 和 Chrome、Safari

【解决方案2】：

尝试为无 -webkit- 或 -moz- 浏览器添加语句。
我还没有尝试过，但它可能是解决方案。

transform-origin: top;
animation: balance 1.5s ease-in-out 110ms 1 alternate;


@keyframes balance { 
     25% { transform: rotateX(-60deg);}  
     45% { transform: rotateX(50deg); } 
     69% { transform: rotateX(-30deg); } 
     90% { transform: rotateX(30deg); } 
     100% { transform: rotateX(0deg);} 
}

TJL

【讨论】：