Переключаемость преобразования преобразования CSS

Question

У меня есть код, который отлично работает на Chrome, Opera и Safari, но не на Mozilla. Я включил рабочий скрипт для визуализации проблемы. Я попытался изменить размер, изменить угол поворота, видимость и т. Д., И все же я не смог решить проблему.

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/

Answer 1

Backface-видимость не работает должным образом в Mozilla.

Попробуйте добавить этот код в CSS (это работает для меня):

.card { 
    backface-visibility: hidden; 
} 

При этом, вы добавляете backface-visibility в контейнере тоже.

Ref: Backface-Visibility Not Working Properly in Firefox (Works in Safari)