Question

我一直试图创建翻转卡片效果，但我似乎无法获得它，卡片会翻转，但相同的内容位于卡片的另一侧（除了它之外）反转）我无法弄清楚如何用新内容替换它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

CSS3 Animations是你的朋友......

看起来你翻转了，但这是一招！

＆＃13;

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

＆＃13;

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

＆＃13;

对于内容更改，如果您通过与背景相关联的图片导入内容，则可以切换图像@keyframe 50％;

CSS：卡片翻转效果？

1 个答案: