Как перевернуть Div и показать контент разного размера спереди и сзади? ⇐ CSS

[Anonymous]

Я пытаюсь создать элемент div < /code> «Flipcard», который содержит контент разного размера спереди и сзади. < /p>

html: < /p>

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

Front
Back ... put some long text here ...

< /code>

JavaScript просто добавляет и удаляет класс «перевернутый»: < /p>

$('.flipcard').click(function(e) {
var $card = $(this);
if ($card.hasClass("flipped")) $card.removeClass('flipped');
else $card.addClass('flipped');
});
< /code>

Все волшебство происходит в CSS: < /p>

.flipcard {
margin: 1em auto;
width: 80%;
/* I don't want to set the height because
we don't know the size of the content */
border: solid 1em white;
border-radius: 0.5em;
font-family: Georgia;
-webkit-perspective: 800;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
cursor: pointer;
}
.flipcard:hover {
box-shadow: 0 0 1em black;
}
.flipcard.flipped {
-webkit-transform: rotatey(-180deg);
}
.flipcard .face {
padding: 1em;
text-align: center;
-webkit-backface-visibility: hidden;
}
.flipcard .front {
background: #220000;
color: white;
}
.flipcard .back {
background: #66eeff;
color: black;
-webkit-transform: rotateY(180deg);
}

jsfiddle: http://jsfiddle.net/luken/qdbev/
Как вы можете видеть, содержание с фронта мешает спине, и они оба растягивают флипса до комбинированной высоты. Я бы хотел, чтобы фронт показал с правильной высотой его содержания и спиной, чтобы показать подходящую высоту его содержания. Я пытался сделать позицию лиц: Absolute и заставить их уйти с отображения: нет для отображения: block на каждом флипке ... но ничего не работает правильно.

Есть идеи?

Подробнее здесь: https://stackoverflow.com/questions/210 ... t-and-back