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

您必须单独旋转两侧，而不是旋转父级。

＆＃13;

＆＃13;

    .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;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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;
}

Answer 3

Here是一个很好的例子，如何翻转卡片......

<强> 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);
}