CSS3 Flip Card with Automatic Height

Question

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: ```

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; } .fli…

Accepted Answer

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 Flip Card with Automatic Height

Solution

Problem