css3 - CSS 3D Effect doesn't work in Mozilla FireFox -
when visit google drive document @ https://goo.gl/u6p82y google chrome or opera browser link's hover effect works fine. in mozilla firefox browser hover effect doesn't work.
must change?
.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); }
you have 2 different values -webkit- , -moz-.
change this...
.flip3d:hover >.front { -webkit-transform: perspective(600px) rotatey(-180deg); -moz-transform: perspective(600px) rotatey(0deg); /* <-- wrong */ } to this...
.flip3d:hover >.front { -webkit-transform: perspective(600px) rotatey(-180deg); -moz-transform: perspective(600px) rotatey(-180deg); } working demo...
.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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 job</button></div> <div class="front color1"><h4>writing & translation</h4> <i class="fa fa-pencil-square-o myfclass"></i> </div> </div> </div>as side note, should including non-prefixed versions of of transforms , transitions too. eg.
-webkit-transform: perspective(600px) rotatey(-180deg); -moz-transform: perspective(600px) rotatey(-180deg); transform: perspective(600px) rotatey(-180deg);
Comments
Post a Comment