css - 使用 3d css 转换翻转时，Firefox 不会隐藏卡片的背面

Question

我正在使用 CSS 3d 过渡在卡片背面放置一些文本。悬停时，卡片会翻转并显示文本。

这在 Chrome 上效果很好；但是，在 Firefox 上，卡片的正面在翻转时仍然可见。

任何人都可以帮助我使用适用于所有浏览器的 CSS 吗？

https://codepen.io/anon/pen/gdqNxo

HTML:

<div id="fws_5ba42198264cd" class="vc_row vc_row-fluid  animate_onoffset row-dynamic-el standard_section  home-grid-row discover-grid-row location-four-grid-row bring-up-five-px  " style=""><div id="home-grid-row discover-grid-row location-four-grid-row bring-up-five-px" style="position: absolute;top: 0;"></div><div class="container  dark"><div class="section_clear">
    <div class="vc_col-sm-6 make-look-pretty vc_column column_container with_padding vc_custom_1537378625076  vc_custom_1537378625076" style="padding:" data-animation="none" data-delay="">
            <div class="wpb_wrapper">

    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <h2 class="white">
        </div> 
    </div> 
            </div> 
    </div> 

    <div class="vc_col-sm-6 locations-four-grid four-grid-height vc_column column_container with_padding " style="padding:" data-animation="none" data-delay="">
            <div class="wpb_wrapper">
                <div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="students fix-padding four-grid-height wpb_column vc_column_container vc_col-sm-6 vc_col-has-fill"><div class="vc_column-inner vc_custom_1537389883311"><div class="wpb_wrapper">
    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <div class="card-wrapper">
<div class="side-a">
<h4 class="white uppercase" style="text-align: center;/*! backface-visibility: hidden; */">Card 1</h4>
</div>
<div class="side-b">
<div class="wrapper">
<h5 class="white">Filler Text</h5>
<ul class="white">
<li><a href=#>Link A</a></li>
<li><a href=#>Link B</a></li>
</ul>
</div>
</div>
</div>

        </div> 
    </div> </div></div></div><div class="campus fix-padding columbus-campus wpb_column vc_column_container vc_col-sm-6"><div class="vc_column-inner "><div class="wpb_wrapper">
    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <div class="card-wrapper">
<div class="side-a">
<h4 class="white uppercase" style="text-align: center;">Card 2</h4>
</div>
<div class="side-b">
<div class="wrapper">
<h5 class="white">Filler</h5>
<ul class="white">
<li><a href=#>LInk A</a> | <a href="#">Map</a></li>
<li><a href=#>LInk B</a></li>
</ul>
</div>
</div>
</div>

        </div> 
    </div> </div></div></div></div><div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="admissions fix-padding wpb_column vc_column_container vc_col-sm-6"><div class="vc_column-inner "><div class="wpb_wrapper">
    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <div class="card-wrapper">
<div class="side-a">
<h4 class="white uppercase" style="text-align: center;">Card 3</h4>
</div>
<div class="side-b">
<div class="wrapper">
<h5 class="white">Filler</h5>
<ul class="white">
  <li><a href=#>Filler</li>
</ul>
</div>
</div>
</div>

        </div> 
    </div> </div></div></div><div style="display:none;" class="connect fix-padding wpb_column vc_column_container vc_col-sm-6"><div class="vc_column-inner "><div class="wpb_wrapper">
    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <div class="card-wrapper">
<div class="side-a">
<h4 class="white uppercase" style="text-align: center;">Connect</h4>
</div>
<div class="side-b">
<div class="wrapper">
<h5 class="white">CONNECT</h5>
<ul class="white">
<li><a href="">Blog</a></li>
<li><a href="">Social Media</a></li>
</ul>
</div>
</div>
</div>

        </div> 
    </div> </div></div></div></div>
            </div> 
    </div> 
</div></div></div>

CSS:

/* Setting up the flippy css */

.vc_column_container.fix-padding .vc_column-inner {
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
}

.locations-four-grid .card-wrapper {
    -webkit-box-pack:   center;
    -ms-flex-pack:      center;
    justify-content:    center;
    -webkit-box-align:  center;
    -ms-flex-align:     center;
    display:            -webkit-box;
    display:            -ms-flexbox;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    display: flex;
    height: 300px;
    padding: 0;
    z-index: 2;
}

.locations-four-grid .side-a,
.four-grid.side-a {
    display:            -webkit-box;
    display:            -ms-flexbox;
    background-repeat:  no-repeat;
    -webkit-box-pack:   center;
    -ms-flex-pack:      center;
    justify-content:    center;
    background-size:    cover;
    -webkit-box-align:  center;
    -ms-flex-align:     center;
    align-items:        center;
    display: flex;
    width: 100%;
}

.locations-four-grid .side-b,
.four-grid.side-b {
    position: absolute;
    width: 100%;
    z-index: -1;
    left: 0;
    top: 0;
}

.four-grid-height .side-a,
.four-grid-height .side-b {
    height: 300px;
}

.five-grid-height .side-a,
.five-grid-height .side-b {
    height: 200px;
}

.card-wrapper {
    -webkit-transition: all 1s cubic-bezier(.5,-0.3,.85,1.25);
    -o-transition: all 1s cubic-bezier(.5,-0.3,.85,1.25);
    transition: all 1s cubic-bezier(.5,-0.3,.85,1.25);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.locations-four-grid .wpb_content_element .wpb_wrapper:hover .card-wrapper,
.locations-five-grid .wpb_content_element .wpb_wrapper:hover .card-wrapper {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
}

.locations-four-grid .wpb_content_element .wpb_wrapper:hover h4,
.locations-five-grid .wpb_content_element .wpb_wrapper:hover h4,
 {
    display:none;
}

.side-a,
.side-b {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.side-b {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

.side-b .wrapper {
    padding: 20px;
}

.side-b ul {
    list-style-type: none;
}

.side-b h5 {
    text-align: center;
    line-height: 22px;
    font-size: 15px;
}

.side-b a:hover {
    color: #fff;
    padding: 1px 15px;
    background-color: #f9972c;
}

.location-four-grid-row .side-b {
    -webkit-box-shadow: inset 0 0 5px #fff;
            box-shadow: inset 0 0 5px #fff;
    background-color: #87cdec;
}

.locations-five-grid .side-b {
    -webkit-box-shadow: inset 0 0 5px #fff;
            box-shadow: inset 0 0 5px #fff;
    background-color: #f6943b;
}

.vc_col-sm-6 {
  width:300px;
    margin-bottom: 25px
}

.side-a {
background-color: rebeccapurple;
}

Answer 1

没关系，在这里找到答案:Backface-Visibility Not Working Properly in Firefox (Works in Safari) .

关键是在卡片正反两面加上transform: rotateX(0);

向容器添加 backside-visibility: hidden; 也可以，但它会使鼠标无法访问卡片的背面，即您无法单击背面的链接。

我不知道为什么会这样，但显然这在 firefox 中已经存在三年了:https://bugzilla.mozilla.org/show_bug.cgi?id=1201471