CSS 3D 效果在 Mozilla FireFox 中不起作用
CSS 3D Effect doesn't work in Mozilla FireFox
当您使用 Google Chrome 或 Opera 浏览器在 https://goo.gl/u6p82Y 访问我的 Google 云端硬盘文档时,link 的悬停效果正常。
但是在Mozilla Firefox浏览器中,悬停效果不起作用。
我必须改变什么?
.flip3D {
width: 200px;
height: 120px;
margin: auto;
float: left;
}
.flip3D > .front {
position: absolute;
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
width: 200px;
height: 120px;
backface-visibility: hidden;
-webkit-transition: transform .5s linear 0s;
-moz-transition: transform .5s linear 0s;
}
.flip3D > .back {
position: absolute;
-webkit-transform: perspective(600px) rotateY(180deg);
-moz-transform: perspective(600px) rotateY(180deg);
width: 200px;
height: 120px;
backface-visibility: hidden;
-webkit-transition: transform .5s linear 0s;
-moz-transition: transform .5s linear 0s;
}
.flip3D:hover >.front {
-webkit-transform: perspective(600px) rotateY(-180deg);
-moz-transform: perspective(600px) rotateY(0deg);
}
.flip3D:hover > .back {
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
}
-webkit-
和 -moz-
有两个不同的值。
改变这个...
.flip3D:hover >.front {
-webkit-transform: perspective(600px) rotateY(-180deg);
-moz-transform: perspective(600px) rotateY(0deg); /* <-- WRONG */
}
对此...
.flip3D:hover >.front {
-webkit-transform: perspective(600px) rotateY(-180deg);
-moz-transform: perspective(600px) rotateY(-180deg);
}
工作演示...
.flip3D {
width: 200px;
height: 120px;
margin: auto;
float: left;
}
.flip3D > .front {
position: absolute;
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
width: 200px;
height: 120px;
backface-visibility: hidden;
-webkit-transition: transform .5s linear 0s;
-moz-transition: transform .5s linear 0s;
}
.flip3D > .back {
position: absolute;
-webkit-transform: perspective(600px) rotateY(180deg);
-moz-transform: perspective(600px) rotateY(180deg);
width: 200px;
height: 120px;
backface-visibility: hidden;
-webkit-transition: transform .5s linear 0s;
-moz-transition: transform .5s linear 0s;
}
.flip3D:hover >.front {
-webkit-transform: perspective(600px) rotateY(-180deg);
-moz-transform: perspective(600px) rotateY(-180deg);
}
.flip3D:hover > .back {
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
}
<div class="myMain">
<div class="flip3D">
<div class="back color1">
<h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button>
</div>
<div class="front color2">
<h4>Web Development</h4>
<i class="fa fa-laptop myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2">
<h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button>
</div>
<div class="front color1"><h4>Desktop Application</h4>
<i class="fa fa-desktop myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Android & Mobile</h4>
<i class="fa fa-mobile myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Data Science & Analytics</h4>
<i class="fa fa-table myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Engineering & Architecture</h4>
<i class="fa fa-building myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Design & Creative</h4>
<i class="fa fa-skyatlas myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Sales & Marketing</h4>
<i class="fa fa-shopping-cart myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Legal</h4>
<i class="fa fa-gavel myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Apparel & Fashion</h4>
<i class="fa fa-female myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Game Development</h4>
<i class="fa fa-gamepad myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Music & Audio</h4>
<i class="fa fa-headphones myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Video & Animation</h4>
<i class="fa fa-film myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Accounting & Consulting</h4>
<i class="fa fa-money myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Admin & Support</h4>
<i class="fa fa-user myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Media & Modeling</h4>
<i class="fa fa-star myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Online Doctor</h4>
<i class="fa fa-user-md myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Event Management</h4>
<i class="fa fa-trophy myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Writing & Translation</h4>
<i class="fa fa-pencil-square-o myFclass"></i>
</div>
</div>
</div>
附带说明一下,您还应该包括所有转换和过渡的非前缀版本。例如
-webkit-transform: perspective(600px) rotateY(-180deg);
-moz-transform: perspective(600px) rotateY(-180deg);
transform: perspective(600px) rotateY(-180deg);
当您使用 Google Chrome 或 Opera 浏览器在 https://goo.gl/u6p82Y 访问我的 Google 云端硬盘文档时,link 的悬停效果正常。
但是在Mozilla Firefox浏览器中,悬停效果不起作用。
我必须改变什么?
.flip3D {
width: 200px;
height: 120px;
margin: auto;
float: left;
}
.flip3D > .front {
position: absolute;
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
width: 200px;
height: 120px;
backface-visibility: hidden;
-webkit-transition: transform .5s linear 0s;
-moz-transition: transform .5s linear 0s;
}
.flip3D > .back {
position: absolute;
-webkit-transform: perspective(600px) rotateY(180deg);
-moz-transform: perspective(600px) rotateY(180deg);
width: 200px;
height: 120px;
backface-visibility: hidden;
-webkit-transition: transform .5s linear 0s;
-moz-transition: transform .5s linear 0s;
}
.flip3D:hover >.front {
-webkit-transform: perspective(600px) rotateY(-180deg);
-moz-transform: perspective(600px) rotateY(0deg);
}
.flip3D:hover > .back {
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
}
-webkit-
和 -moz-
有两个不同的值。
改变这个...
.flip3D:hover >.front {
-webkit-transform: perspective(600px) rotateY(-180deg);
-moz-transform: perspective(600px) rotateY(0deg); /* <-- WRONG */
}
对此...
.flip3D:hover >.front {
-webkit-transform: perspective(600px) rotateY(-180deg);
-moz-transform: perspective(600px) rotateY(-180deg);
}
工作演示...
.flip3D {
width: 200px;
height: 120px;
margin: auto;
float: left;
}
.flip3D > .front {
position: absolute;
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
width: 200px;
height: 120px;
backface-visibility: hidden;
-webkit-transition: transform .5s linear 0s;
-moz-transition: transform .5s linear 0s;
}
.flip3D > .back {
position: absolute;
-webkit-transform: perspective(600px) rotateY(180deg);
-moz-transform: perspective(600px) rotateY(180deg);
width: 200px;
height: 120px;
backface-visibility: hidden;
-webkit-transition: transform .5s linear 0s;
-moz-transition: transform .5s linear 0s;
}
.flip3D:hover >.front {
-webkit-transform: perspective(600px) rotateY(-180deg);
-moz-transform: perspective(600px) rotateY(-180deg);
}
.flip3D:hover > .back {
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
}
<div class="myMain">
<div class="flip3D">
<div class="back color1">
<h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button>
</div>
<div class="front color2">
<h4>Web Development</h4>
<i class="fa fa-laptop myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2">
<h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button>
</div>
<div class="front color1"><h4>Desktop Application</h4>
<i class="fa fa-desktop myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Android & Mobile</h4>
<i class="fa fa-mobile myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Data Science & Analytics</h4>
<i class="fa fa-table myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Engineering & Architecture</h4>
<i class="fa fa-building myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Design & Creative</h4>
<i class="fa fa-skyatlas myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Sales & Marketing</h4>
<i class="fa fa-shopping-cart myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Legal</h4>
<i class="fa fa-gavel myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Apparel & Fashion</h4>
<i class="fa fa-female myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Game Development</h4>
<i class="fa fa-gamepad myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Music & Audio</h4>
<i class="fa fa-headphones myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Video & Animation</h4>
<i class="fa fa-film myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Accounting & Consulting</h4>
<i class="fa fa-money myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Admin & Support</h4>
<i class="fa fa-user myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Media & Modeling</h4>
<i class="fa fa-star myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Online Doctor</h4>
<i class="fa fa-user-md myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color1"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color2"><h4>Event Management</h4>
<i class="fa fa-trophy myFclass"></i>
</div>
</div>
<div class="flip3D">
<div class="back color2"><h4>000000 Available</h4>
<button class="btn btn-default myDefult">View</button><br/>
<button class="btn btn-success mySuccess">Post your Job</button></div>
<div class="front color1"><h4>Writing & Translation</h4>
<i class="fa fa-pencil-square-o myFclass"></i>
</div>
</div>
</div>
附带说明一下,您还应该包括所有转换和过渡的非前缀版本。例如
-webkit-transform: perspective(600px) rotateY(-180deg);
-moz-transform: perspective(600px) rotateY(-180deg);
transform: perspective(600px) rotateY(-180deg);