CSS:背面可见性不起作用

Question

我正在尝试创建一个卡片翻转效果，但我无法使backface-visibility: hidden;工作。我做错了什么？

    .content {
      width: 100%;
      height: 70vh;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      top: 50px;
    }
    
    .card {
      margin: 10px;
      width: 300px;
      height: 450px;
      border: 1px solid black;
      float: left;
      position: relative;
      left: 10%;
      background-color: green;
      transition: all 0.6s ease;
    }
    
    .card:hover {
      transform: rotateY(180deg);
    }
    
    .front, .back {
      width: 300px;
      height: 450px;
      position: absolute;
      backface-visibility: hidden;
    
    }

    <div class="content">
      <div class="card">
      
        <div class="front">
          <p>hello</p>
        </div>
    
        <div class="back">
          <p>goodbye</p>
        </div>
      </div>
    </div>

Answer 1

您必须分别旋转两侧，而不是旋转父对象。

    .content {
      width: 100%;
      height: 70vh;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      top: 50px;
    }
    
    .card {
      margin: 10px;
      width: 300px;
      height: 450px;
      float: left;
      position: relative;
      left: 10%;
    }
            
    .front,
    .back {
      width: 300px;
      height: 450px;
      position: absolute;
      backface-visibility: hidden;
      transition-duration: 600ms;
      border: 1px solid black;
    }
    .front {
      background-color: green;
      transform: none;
    }
    .back {
      background-color: red;
      transform: rotateY(180deg);
    }
    .card:hover .front {
      transform: rotateY(180deg);
    }
    .card:hover .back {
      transform: none;
    }

    <div class="content">
      <div class="card">
      
        <div class="front">
          <p>hello</p>
        </div>
    
        <div class="back">
          <p>goodbye</p>
        </div>
      </div>
    </div>

Answer 2

这里有一个很好的例子如何翻转卡片。。。

CSS:

.content {
    perspective: 1000;
}
.content:hover .card {
    transform: rotateY(180deg);
}
.content, .front, .back {
  width: 300px;
  height: 450px;
}
.front, .back {
  border: 1px solid black;
  background: green;
}

.card {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}
.content:hover .card {
    transform: rotateY(180deg);
}

Answer 3

http://jsfiddle.net/tj3eacxL/

您的原始CSS位于顶部。必要的更改是：

.card {
    -webkit-transform-style: preserve-3d;
    background: none; /* Apply a background colour to the whole card to cover up the faces */
}
.back {
    transform: rotateY(180deg); /* because the back should be flipped initially when it's in the back */
}
.front, .back {
    background-color: green;
}