如何在3D变换中隐藏包含文本的div

Question

我已经尝试用'flipcard'效果制作了大约一天半的图片，我认为我已经接近解决方案了。

然而，正如你在codependency上看到的，剩下的唯一问题是，当我的图像处于静态状态(即不悬停在上面)时，你仍然可以看到文本躺在它们上面。

如果有人能想出一种方法，当图像是静态的时候，上面没有文字，但是当它们悬停在上面时，它们会以'flipcard'效果动画-例如已经发生的

基本上，我只是想隐藏/删除文本时，图像处于静态状态，但在动画发生后可见-好像他们是在图像的"另一面"!其余的就好了。

感谢任何提前回答，谢谢大家!: -)

Codepen link - http://codepen.io/skoster7/pen/kkYEJk?editors=0100

HTML:

<div class="flexcontainer">
    <div class="photo-container">
        <div class="photo">
            <img src="https://media2.giphy.com/media/kiXLfqncf42kg/200_s.gif" class="front" />
            <div class="photo-desc back">Christmas tree</div>
        </div>
    </div>
    <div class="photo-container">
        <div class="photo">
            <img src="http://hdwallpaperpoint.com/wp-content/uploads/2016/05/Happy-birthday-candles-on-cake-small-cake-hd-4k-wallpaper-300x200.jpg" class="front" />
            <div class="photo-desc back">Happy Birthday</div>
        </div>
    </div>
    <div class="photo-container">
        <div class="photo">
            <img src="https://www.walldevil.com/wallpapers/a76/thumb/halloween-jack-o039-lantern-pumpkin-ghost-cat-skull-spider.jpg" class="front" />
            <div class="photo-desc back">Halloween</div>
        </div>
    </div>
</div>

CSS:

.flexcontainer {
    display: flex;
    perspective: 700px;
}
.photo {
    position: relative;
    z-index: 1000;
}
.photo-desc {
    position: relative;
    z-index: 100;
}
.photo-container {
    position: relative;
    margin-right: 10px;
    transition-property: transform;
    transition-duration: 2s;
    transition-style: preserve-3d;
    backface-visibility: hidden;
}
    .photo-container:hover {
        transform: rotateY(-180deg);
    }
.back {
    backface-visibility: visible;
    position: absolute;
    top: 10;
    margin-top: -200px;
    transform: rotateY(-180deg);
    color: red;
}

Answer 1

photo和back应该是兄弟元素(而不是父/子元素)。

下面是一个代码片段(改变了元素的宽度/高度以适合SO):

.flexcontainer {
  display: flex; 
  perspective: 700px; 
}
.photo {
  width: 200px;
  height: 150px; 
  transform: rotateY(0deg); 
}
.photo img {
  width: 200px;
  height: 150px;
}
.photo-container {
  transform-style: preserve-3d;
  transition-property: transform;
  transition-duration: 2s; 
  position:relative;
  width: 200px;
  height: 150px; 
  margin:10px;
}
.photo-container:hover {
  transform: rotateY(-180deg); 
}
.back {
  transform: rotateY(180deg); 
  color: red;
}
.photo,
.back {
  backface-visibility: hidden; 
  position:absolute;
  left:0;
  top:0;
}
.back {
  transform: rotateY(180deg); 
}

<div class="flexcontainer">
  <div class="photo-container">
    <div class="photo">
      <img src="https://media2.giphy.com/media/kiXLfqncf42kg/200_s.gif" class="front">
    </div>
    <div class="back">Christmas tree</div>
  </div>
  <div class="photo-container">
    <div class="photo">
      <img src="http://hdwallpaperpoint.com/wp-content/uploads/2016/05/Happy-birthday-candles-on-cake-small-cake-hd-4k-wallpaper-300x200.jpg" class="front">
    </div>
    <div class="back">Happy Birthday</div>
  </div>
  <div class="photo-container">
    <div class="photo">
      <img src="https://www.walldevil.com/wallpapers/a76/thumb/halloween-jack-o039-lantern-pumpkin-ghost-cat-skull-spider.jpg" class="front">
    </div>
    <div class="back">Halloween</div>
  </div>
</div>

和一个工作的依存关系:
http://codepen.io/anon/pen/Egazvq?editors=1100

Answer 2

您可以通过将display: none;添加到.back类来实现这一点

，然后添加一些东西到你的css:

.photo-container:hover .back {
  display: block;
}

下面是一个更新后的codependency示例:

http://codepen.io/anon/pen/QKwRvA?编辑= 1100

Answer 3

嗯，我喜欢这个挑战。我马上为您添加另一种解决方案。

.flexcontainer {
  display: flex; 
  perspective: 700px; 
}
.photo-desc { 
  position: absolute; 
}
.photo-container {  
  position: relative; 
  z-index: 100;  
  margin-right: 10px; 
  transition-property: transform;
  transition-duration: 2s; 
  transition-style: preserve-3d; 
}
.photo-container:hover {
  transform: rotateY(-180deg);
  backface-visibility: visible;
}
.back {
  position: absolute;
  top: 10; 
  margin-top: -200px; 
  transform: rotateY(180deg);
  color: red; 
  opacity: 0;
}
.photo-container:hover > .back {
  opacity: 1;
  transition: opacity 1s linear;
}

<div class="flexcontainer">
  <div class="photo-container">
    <img src="https://media2.giphy.com/media/kiXLfqncf42kg/200_s.gif" class="front">
    <div class="back">
      Christmas tree
    </div>
  </div>
  
   <div class="photo-container">
     <img src="http://hdwallpaperpoint.com/wp-content/uploads/2016/05/Happy-birthday-candles-on-cake-small-cake-hd-4k-wallpaper-300x200.jpg" class="front">
    <div class="back">
      Happy Birthday
       </div>
       </div>
  
  <div class="photo-container">
    <img src="https://www.walldevil.com/wallpapers/a76/thumb/halloween-jack-o039-lantern-pumpkin-ghost-cat-skull-spider.jpg" class="front">
    <div class="photo-desc back">Halloween
    </div>
  </div>
  
  
</div>

这样做，使文本"淡入"等。我觉得配上你的动画挺酷的。我也得到了它，所以你的图像停留"出现"时，悬停，而不是翻转动画时的反面"消失"。

作为旁注:失望的是其他人先找到了另一个解决方案:)