html - CSS transformation switching visibility -

i have code works fine on chrome, opera , safari not on mozilla. have included working fiddle visualize problem. have tried changing size, changing angle of rotation, visibility, etc., , still have not been able solve problem.

html :

<section class='in-circle'>   <div class='card onhover'>     <div class='front'>        <label id='image'></label>     </div>      <div class='back'>        <a href='./lessons.php'>schedules</a>     </div>    </div> </section> 

css:

.in-circle{     width: 125px;     height: 125px;     display: table;     position: relative;      border: 2px solid #ffffff;       font-family: 'handlee', cursive;       -webkit-border-radius: 100% 100%;        -moz-border-radius: 100% 100%;             border-radius: 100% 100%;      -webkit-transition: opacity 1.75s ease-in-out;        -moz-transition: opacity 1.75s ease-in-out;         -ms-transition: opacity 1.75s ease-in-out;          -o-transition: opacity 1.75s ease-in-out;             transition: opacity 1.75s ease-in-out; }      .card {     -webkit-perspective: 800;             perspective: 800;      -webkit-transition: 0.5s;        -moz-transition: 0.5s;             transition: 0.5s;      -webkit-transform-style: preserve-3d;             transform-style: preserve-3d; } .card.onhover:hover{     -webkit-transform: rotatey(-540deg);            -moz-transform: rotatey(-540deg);             transform: rotatey(-540deg); } .card.onclick{     -webkit-transform: rotatey(-540deg);            -moz-transform: rotatey(-540deg);             transform: rotatey(-540deg); }  .card .front {     width: inherit;     height: inherit;         cursor: pointer;      position: absolute;      -webkit-backface-visibility: hidden;             backface-visibility: hidden;      z-index: 1; }  .card .back {     width: inherit;     height: inherit;          position: absolute;      -webkit-backface-visibility: hidden;             backface-visibility: hidden;      -webkit-transform: rotatey(-540deg);             transform: rotatey(-540deg); }  .in-circle > .card{     width: inherit;     height: inherit;     display: block;     position: relative; } .in-circle > .card > .front, .in-circle > .card > .back{     display: table;     text-align: center;           -webkit-border-radius: 100% 100%;        -moz-border-radius: 100% 100%;             border-radius: 100% 100%;      background: rgba(255, 255, 255, 0.5); } .in-circle > .card > .front > *, .in-circle > .card > .back > *{     display: table-cell;     vertical-align: middle; } .in-circle > .card > .back > a{     color: #ff0000; }   .in-circle > .card > .front #image{     background-image: url('http://s30.postimg.org/4o23rf7bx/camera.png'); } 

http://jsfiddle.net/gacci/mvct15gh/

backface-visibility doesnt work in mozilla.

try add code in css (it works me):

.card {   backface-visibility: hidden; } 

with this, adding backface-visibilityin container too.

ref: backface-visibility not working in firefox (works in safari)