CSS3自动高度翻转卡 [英] CSS3 Flip Card with Automatic Height

问题描述

我正在使用教程使用CSS3和jQuery创建一个翻转卡效果，我有问题获得高度来调整到内容长度，而它仍然在中心水平翻转。

FIDDLE

代码：

 < div class =flip> 
< div class =card> 
< div class =face front> 
前< br>其他文字。< br>其他文字。< br>其他文字。< br>其他文本。 
< / div> 
 
< div class =face back> 
返回
< / div> 
< / div> 
< / div> 
  

---

  {
 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 b $ b $（this）.removeClass（'flipped'）; 
}）; 
 return false; 
}）; 
  pre> 
 
 
 
解决方案
  jsFiddle  。
 
 
 
 JS ：
  $（'。flip'）。click（function（）{
 $（this）.find '.card'）。addClass（'flipped'）; 
 return false; 
}）。mouseleave（function（）{
 $（' （'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 离开卡时，保留其在整个动画的高度。我也清理了CSS，以减少冗余。希望这有助于！
 
I'm using a tutorial to create a flip card effect using CSS3 and jQuery and I'm having issues getting the height to adjust to the content length while having it still flip on the center horizontal.

FIDDLE.

Code:
<div class="flip"> 
    <div class="card"> 
        <div class="face front"> 
            Front<br> Other text.<br> Other text.<br> Other text.<br> Other text.
        </div> 

        <div class="face back"> 
            Back
        </div> 
    </div> 
</div> 




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;
});​
​
解决方案
Here's a working solution on 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);
}
A defined height isn't flexible, so what you're seeing is what you've defined. Since the height will not remain constant, the front or the back needs to have a defined height that matches whichever element is the tallest. In the example, .front is taller, so .back is updated to have the same height, allowing you to achieve the vertical flip effect at the center.

In your example, the mouseleave event can fire while the elements during the animation. I have assumed that you did not want this to occur, so I've updated the logic to remove .flipped when leaving the card, which retains its height throughout the animation. I also cleaned up the CSS to be less redundant. Hope this helps!

                        
这篇关于CSS3自动高度翻转卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！