Откидная карта CSS3 с автоматической высотой ⇐ CSS

[Anonymous]

Я использую руководство по созданию эффекта перевернутой карты с помощью CSS3 и jQuery, и у меня возникли проблемы с адаптацией высоты к длине содержимого, при этом он по-прежнему переворачивается по центру по горизонтали.

FIDDLE.

Код:

Код: Выделить всё

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;
});​

​

Подробнее здесь: https://stackoverflow.com/questions/130 ... tic-height