强制div低于另一个（具有3D翻转效果）

我已经在CSS中实现了3D翻转效果，以允许我的div有一个正面和背面（默认显示为正面，回到悬停状态）。翻转本身工作得很好，但最后还有一个小高度的div，我似乎无法弄清楚如何将翻转的翻转过来。我的目标是让一个线上的翻转格，另一个翻转下方的图像，而不是被翻转格覆盖。强制div低于另一个（具有3D翻转效果）

当然，因为我们不能让这个过于简单，所以翻转图像和div中的图像都必须能够处理可变大小的图像，它们将永远不会设置尺寸。

这里的HTML：

<div class="images"> 
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 

     <div class="flipper"> 

      <div class="front"> 
       <img src="http://www.placehold.it/350x450?text=front"> 
      </div> 

      <div class="back"> 
       <img src="http://www.placehold.it/350x450?text=back"> 
      </div> 

     </div> 

    </div> 
    <br /> 
    <div class="thumbnails columns-3" style=""><img src="http://www.placehold.it/350x150?text=image"></div> 
</div>

而这里的CSS：

div.images { 
    float: left; 
    margin-bottom: 1em; 
} 


/* Flip3D */ 
/* entire container, keeps perspective */ 
.flip-container { 
    perspective: 1000; 
} 
    /* flip the pane when hovered */ 
    .flip-container:hover .flipper, .flip-container.hover .flipper { 
     transform: rotateY(180deg); 
    } 

.flip-container, .front, .back { 
/* width: 100%; 
    height: 100%;*/ 

} 

/* flip speed goes here */ 
.flipper { 
    transition: 0.6s; 
    transform-style: preserve-3d; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    backface-visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

/* front pane, placed above back */ 
.front { 
    z-index: 2; 
    /* for firefox 31 */ 
    transform: rotateY(0deg); 
} 

/* back, initially hidden pane */ 
.back { 
    transform: rotateY(180deg); 
}

这里是我的小提琴：https://jsfiddle.net/8z2vbcrw/

希望这一切是有道理的，但请让我澄清，如果不。

来源

2016-03-01 carbide20

发生这种情况的原因是因为鳍状肢类的尺寸为0x0，因为其中的所有元素都具有绝对位置。您可以使用JavaScript来查找正面和/或背面卡的尺寸，并将其应用为“鳍状肢类”的高度和宽度 –

如果您使用静态高度时很好，那么您可以通过添加高度：500px ;到您的.flip容器类。 – Naga2Raja

它可以通过给予高度和宽度您.flipper容器或刚刚摆脱前卡上的绝对定位完成...

https://jsfiddle.net/8z2vbcrw/

.front, .back { 
    backface-visibility: hidden; 
    top: 0; 
    left: 0; 
} 
.back { 
    position: absolute; 
}

通过这样做，前卡保持布局。

来源

2016-03-01 02:00:40

删除绝对定位完美地工作，并且是我特定场景的最佳选择。谢谢！ – carbide20

强制div低于另一个（具有3D翻转效果）

回答

相关问题