HTML 中的卡片翻转程序无法正确翻转

Question

卡片确实被翻转了，但是当它翻转过来时，一瞬间出现错误并消失了immediately.How我应该删除那个错误吗？我想这个错误主要发生在 backface-visibility:hidden;被使用了。

*{margin:0px; padding:0px;
}
body{
  background:#000;
}
.wrapper{
  margin:11% 32%;
  position:relative;
  border:5px solid black;
  width:390px;
  height:360px;
  perspective:800px;/*If u add some perspective to the container*/
}
.card{
  width:100%;
  height:100%;
  position:absolute;
  transition:-webkit-transform .7s cubic-bezier(0.175,0.885,0.320,1.275);/*Cubic ease giving a spring to it*/
  transform-style:preserve-3d;/*2Settings...one show child elements as 3d and other as flat...so just make it always on*/
}
.card:hover{
  -webkit-transform:rotateY(-180deg); /*When hovered it card flips*/
} 
h2,h3{
  font-family:"Arial Black", Gadget, sans-serif;
  font-weight:300;
  color:white;
  text-transform:uppercase;
}
p{
  color:white;
}
.front{
  border:15px solid white;
  text-align:center;
  width:360px;
  height:330px;
  position:absolute;
  backface-visibility:hidden; /*I dont wanna see your back*/
}
.back{
  border:15px solid red;
  text-align:center;
  font-weight:400;
  width:360px;
  height:330px;
  position:absolute;/*We dont want block ar something, we want right inside div where it was supposed to be without considering other elements*/
  backface-visibility:hidden;/*I dont wanna see your back*/
  -webkit-transform:rotateY(180deg);/**/
}
h2,.back{ 
  background: #F00943;
}
h3{
  text-align:left;
}
h2{ 
  background:rgba(240, 9, 67, 0.8);
  position: relative;
  top:-80px;
  padding:10px;
  width:350px;
  left:-5px;
}

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
  <body>
    <div class="wrapper"> <!--Front & back are inside Card,Card is inside the Wrapper-->
      <div class="card">
        <div class="front">
          <img src="http://www.dailybackgrounds.com/wp-content/uploads/2013/07/cute-cat-hd-image.jpg" height="330px" width="360px"/>
          <h2>Miss Mittens</h2>
        </div>
        <div class="back"><br/><br/><br/>
          <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Loves:</h3><br/>
          <p>Strings, cuddles, and <br/>long naps in the sun.</p><br/>
          <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dislikes:</h3><br/>
          <p>Bath, things that aren't sparkly and <br/>anything reassembling work.</p>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

将 transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg); 添加到 .front。

Demo Here

* {
  margin: 0px;
  padding: 0px;
}
body {
  background: #000;
}
/*SeaseOutBack:cubic-bezier(0.175,0.885,0.320,1.275);*/

.wrapper {
  margin: 11% 32%;
  position: relative;
  border: 5px solid black;
  width: 390px;
  height: 360px;
  perspective: 800px;
  /*If u add some perspective to the container*/
}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: -webkit-transform .7s cubic-bezier(0.175, 0.885, 0.320, 1.275);
  /*Cubic ease giving a spring to it*/
  transform-style: preserve-3d;
  /*2Settings...one show child elements as 3d and other as flat...so just make it always on*/
}
.card:hover {
  -webkit-transform: rotateY(-180deg);
}
h2,
h3 {
  font-family: "Arial Black", Gadget, sans-serif;
  font-weight: 300;
  color: white;
  text-transform: uppercase;
}
p {
  color: white;
}
.front {
  border: 15px solid white;
  text-align: center;
  width: 360px;
  height: 330px;
  position: absolute;
  backface-visibility: hidden;
  transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg);
}
.back {
  border: 15px solid red;
  text-align: center;
  font-weight: 400;
  width: 360px;
  height: 330px;
  position: absolute;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
h2,
.back {
  background: #F00943;
}
h3 {
  text-align: left;
}
h2 {
  background: rgba(240, 9, 67, 0.8);
  position: relative;
  top: -80px;
  padding: 10px;
  width: 350px;
  left: -5px;
}

<div class="wrapper">
  <!--Front & back are inside Card,Card is inside the Wrapper-->
  <div class="card">

    <div class="front">
      <img src="http://www.dailybackgrounds.com/wp-content/uploads/2013/07/cute-cat-hd-image.jpg" height="330px" width="360px" />
      <h2>Miss Mittens</h2>
    </div>
    <div class="back">
      <br/>
      <br/>
      <br/>
      <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Loves:</h3>
      <br/>
      <p>Strings, cuddles, and
        <br/>long naps in the sun.</p>
      <br/>
      <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dislikes:</h3>
      <br/>
      <p>Bath, things that aren't sparkly and
        <br/>anything reassembling work.</p>
    </div>

  </div>
</div>

注意：在 Chrome 中测试和工作，在 codepen 版本中，我打开了自动自动前缀，因此您必须手动将其放入代码中。

HTML 中的卡片翻转程序无法正确翻转

Card flip program in HTML not fliping properly

html

css

transition

transformation

web