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-visibility在Mozilla中无法正常工作。

尝试在css中添加此代码（适用于我）：

.card {
  backface-visibility: hidden;
}

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

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

CSS转换切换可见性

1 个答案: