html - CSS 变换切换可见性

Question

我的代码在 Chrome、Opera 和 Safari 上运行良好，但在 Mozilla 上却不行。我已经包含了一个工作 fiddle 来可视化问题。我试过改变大小，改变旋转 Angular ，可见性等等，还是没能解决问题。

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

背面可见性在 Mozilla 中无法正常工作。

尝试在您的 CSS 中添加此代码(对我有用):

.card {
  backface-visibility: hidden;
}

有了这个，您也在容器中添加了backface-visibility。

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