[英]css3 hover effect not working on firefox
I am working on a css based hover effects. 我正在研究基于CSS的悬停效果。 However the effects are perfectly working in chrome but not in firefox version 26. here's the
然而,效果完全适用于chrome,但不适用于firefox版本26.这里是
http://jsfiddle.net/gfxbucket/Bz3E8 Any help would be greatly appreciated. http://jsfiddle.net/gfxbucket/Bz3E8任何帮助将不胜感激。 Thanks.
谢谢。
/* Caption Style 4 */
.team-grid li {
-webkit-perspective: 1700px;
-moz-perspective: 1700px;
perspective: 1700px;
-webkit-perspective-origin: 0 50%;
-moz-perspective-origin: 0 50%;
perspective-origin: 0 50%;
}
.team-grid figure {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.team-grid figure > div {
overflow: hidden;
}
.team-grid figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .team-grid figure:hover img,
.team-grid figure.cs-hover img {
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
}
.team-grid figcaption {
height: 100%;
width: 60%;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .team-grid figure:hover figcaption,
.team-grid figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
Well your fiddle works perfect on my FF26 Mac. 那么你的小提琴在我的FF26 Mac上完美无缺。
Although, you're missing a closing / on the img in the html. 虽然,你错过了关闭/在HTML中的img。 Could that have something to do with it if your're running an xhtml strict doctype maybe?
如果您运行xhtml严格的doctype可能会与它有关吗?
Best of luck! 祝你好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.