CSS:卡片翻转效果

Question

我一直在尝试创建翻转卡片效果，但我似乎无法获得，卡片翻转，但卡片的另一侧有相同的内容（除了翻转），我不知道如何用新内容替换它。

.container {
  width: 100%;
  height: 800px;
  position: relative;
  top: -80px;
  left: 10px;
}
.box {
  border: 1px solid #d3d3d3;
  height: 270px;
  width: 250px;
  position: relative;
  float: left;
  margin: 10px;
  border-radius: 5px; 
  background-color: #bfd4d9;
  transition: all .5s ease;
  transform-style: preserve-3d;
  perspective: 700;
}
.box:hover {
  transform: rotateY(180deg);
}
.content-header {
  width: 100%;
  height: 90px;
  background-color: #638ca6;
  border-radius: 5px 5px 0px 0px;
  z-index: -10;
}
.content-body {
  position: relative;
  top: 10px;
  left: 12px;
  width: 90%;
  height: 100px;
  border-radius: 10px;
  background-color: white;
  font-family: 'Oxygen', sans-serif;
}
.body-text {
  position: relative;
  margin: 5px;
}
.posts-whim-header-pic {
  z-index: 10;
  position: relative;
  left: 10px;
  top: 5px;
  border-radius: 10px;
}
.posts-whim-header-name {
  width: 180px;
  position: relative;
  top: -70px;
  left: 75px;
  color: white;
  font-size: 20px;
  font-family: 'Oxygen', sans-serif;
}

<div class="container">
    <div class="box">
      <div class="content">
        <div class="content-header">
          <div class="header-pic">
            <img src="/assets/profile.jpg" />
          </div>
          <div class="header-name">
          </div>
        </div>
        <div class="content-body">
          <div class="body-text">
        </div>  
</div>

Answer 1

CSS3动画是您的朋友。。。

它看起来像你翻转，但这是一个技巧！

.container {
  width: 100%;
  height: 800px;
  position: relative;
  top: -80px;
  left: 10px;
}
.box {
  border: 1px solid #d3d3d3;
  height: 270px;
  width: 250px;
  position: relative;
  float: left;
  margin: 10px;
  border-radius: 5px; 
  background-color: #bfd4d9;
  //transition: all .5s ease;
  transform-style: preserve-3d;
  perspective: 700;
}
.box:hover {
  -webkit-animation: flipp 0.5s  ;
  -webkit-animation-fill-mode: forwards;
  animation:flipp 0.5s  ;
  animation-fill-mode: forwards;
 }
@-webkit-keyframes flipp {
  0% {
  transform: rotateY(0deg);
  font-size: 100%;
  }
 49% {
  transform: rotateY(0deg);
  font-size: 100%;
  }
  50% {
  transform: rotateY(90deg);
  font-size: 200%;
  }          
 
  100% {
  transform: rotateY(0deg);
  font-size: 200%;
  }
}
@keyframes flipp {
  0% {
  transform: rotateY(0deg);
  font-size: 100%;
  }
 49% {
  transform: rotateY(0deg);
  font-size: 100%;
  }
  50% {
  transform: rotateY(90deg);
  font-size: 200%;
  }          
 
  100% {
  transform: rotateY(0deg);
  font-size: 200%;
  }
}
.content-header {
  width: 100%;
  height: 90px;
  background-color: #638ca6;
  border-radius: 5px 5px 0px 0px;
  z-index: -10;
}
.content-body {
  position: relative;
  top: 10px;
  left: 12px;
  width: 90%;
  height: 100px;
  border-radius: 10px;
  background-color: white;
  font-family: 'Oxygen', sans-serif;
}
.body-text {
  position: relative;
  margin: 5px;
}
 .body-text > p{
 color:purple;
 margin-left:100px;
}
.posts-whim-header-pic {
  z-index: 10;
  position: relative;
  left: 10px;
  top: 5px;
  border-radius: 10px;
}
.posts-whim-header-name {
  width: 180px;
  position: relative;
  top: -70px;
  left: 75px;
  color: white;
  font-size: 30px;
  font-family: 'Oxygen', sans-serif;
}

<div class="container">
    <div class="box">
      <div class="content">
        <div class="content-header">
          <div class="header-pic">
             </div>
          <div class="header-name">
          </div>
        </div>
        <div class="content-body">
          
       <div class="body-text">
            <p>test</p>
        </div>  
</div>

至于内容更改，如果你通过与背景相关的图像导入，你可以将图像@keyframe切换50%；