具有自动高度的CSS3翻转卡

我正在使用一个教程来创建一个使用CSS3和jQuery的翻转卡片效果，我在调整内容长度时遇到问题，同时让它仍然在中心水平方向上翻转。

小提琴。

码：

 
 
 Front
 Other text.
 Other text.
 Other text.
 Other text. 
 
 Back 
 
  

---

 body { background: #ccc; } .flip { -webkit-perspective: 800; width: 400px; height: 200px; position: relative; margin: 50px auto; } .flip .card.flipped { -webkit-transform: rotatex(-180deg); } .flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .flip .card .face { width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden ; z-index: 2; font-family: Georgia; font-size: 3em; text-align: center; } .flip .card .front { position: absolute; z-index: 1; background: black; color: white; cursor: pointer; } .flip .card .back { -webkit-transform: rotatex(-180deg); background: blue; background: white; color: black; cursor: pointer; }​ 

---

 $('.flip').click(function(){ $(this).find('.card').addClass('flipped').mouseleave(function(){ $(this).removeClass('flipped'); }); return false; });​ 

Answer 1

这是jsFiddle的有效解决方案。

JS：

 $('.flip').click(function(){ $(this).find('.card').addClass('flipped'); return false; }).mouseleave(function () { $('.flip > .card').removeClass('flipped'); }); var frontHeight = $('.front').outerHeight(); var backHeight = $('.back').outerHeight(); if (frontHeight > backHeight) { $('.flip, .back').height(frontHeight); } else if (frontHeight > backHeight) { $('.flip, .front').height(backHeight); } else { $('.flip').height(backHeight); } 

定义的高度不灵活，因此您所看到的就是您定义的内容。 由于高度不会保持不变，因此正面或背面需要具有与最高元素相匹配的定义高度。 在示例中， .front更高，因此.back更新为具有相同的高度，允许您在中心实现垂直翻转效果。

在您的示例中， mouseleave事件可以在动画期间触发元素。 我假设你不希望这种情况发生，所以我更新了逻辑， .flipped在离开卡时删除.flipped ，它在整个动画过程中保持其高度。 我还清理了CSS，以减少冗余。 希望这可以帮助！

Answer 2

你可以通过使.back位置绝对和100％高度来欺骗它。 并将.front位置保持相对。

 .front {position: relative;} .back {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} 

注意，在某些情况下可能很有用：在页眉和页脚的后面添加2个附加元素，并使页脚位置为绝对位置并将其设置为底部0。