Question

我一直在努力制作三张带有“翻转卡”效果的图片，现在大约一天半，并认为我非常接近解决方案。

但是，正如您在codepen上看到的那样，唯一的问题是，当我的图像处于静止状态（即没有悬停在上面）时，您仍然可以看到文本位于它们之上。

我真的很感激，如果有人能提出一种方法，那么当图像是静态的时，它们上面没有文字，但当它们悬停在它们上面时，它们会以“flipcard”效果为动画 - 比如已经发生了。

基本上，我只是喜欢在图像处于静止状态时隐藏/删除文本，但在动画发生后可见 - 就好像它们位于图像的“另一面”！其余的都很好。

提前感谢任何答案，谢谢你们！： - ）

Codepen链接 - 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

您可以通过将display: none;添加到.back类

来实现此目的

然后在你的css中添加一些东西：

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

这是一个更新的codepen作为示例：

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

Answer 2

好吧，我很享受这个挑战。我将继续为您添加另一种解决方案。

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

这样做，使文本“淡入”等。我觉得你的动画看起来很酷。我也得到了它，所以你的图像在悬停时保持“出现”，而不是在翻转动画时“正在消失”。

作为旁注：对其他人首先找到另一种解决方案感到失望：）

如何在3D变换中隐藏包含图像背后的div

2 个答案: