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：在Mozilla

.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

背向面能见度不工作正常。

试着在你的CSS添加此代码（我的作品）：

.card { 
    backface-visibility: hidden; 
} 

有了这个，你要添加在容器中的backface-visibility了。

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