jquery - jqueryでアニメーションを反転して成長させる

Question

トランプのように見えるページを作成する必要があります。カードをクリックすると、カードが反転し、その詳細が表示されます。jqueryを使用してフリップアニメーションを実装しました。しかし、詳細には大きなコンテンツがあるため、カードを裏返して成長させる必要があります。私が今までやってきたアニメーションは少しぎくしゃくしすぎています。これは私が今までやってきたことです：

HTML:

<div class="flipbox-container0">
    <div class="flipbox0" onclick="flip()"> <span class="spans">Maturity Date</span>

    </div>
</div>
<div id="text1" style="display:none">
    <p style="margin-left:-2.25%; width:100%; background-color:#D5E04E; padding-bottom:10px; padding-left:22px; padding-top:10px;">Maturity Date</p>
    <p>Close</p>
    <p>A bond’s maturity date refers to a specific date in the future on which the investor’s principal will be repaid. Maturities can range from as little as one day to as long as 30 years. The length of a bond’s maturity often correlates to the bond’s risk factor. A bond that matures in one year will typically be less risky than one that matures in 20 years since there will be less price fluctuation in shorter maturities.
        <br />
        <br />Bonds are often referred to as being short-, medium- or long-term. Generally, a bond that matures in one to three years is referred to as a short-term bond, while medium-term bonds are generally those that mature in four to 10 years. Long-term bonds are typically those that mature in more than 10 years.
        <br />
        <br />Once the bond’s maturity is reached, the final interest payment and the original principal are paid to the investor.
    </p>
</div>

Javascript:

function flip()
{
    $(".flipbox0").flippy({
        color_target: "white",
        duration: "300",
        onMidway : function(){
            $(".flipbox0").width(500);
            $(".flipbox0").height(500);
            $(".flipbox1").hide();
            $(".flipbox2").hide();
            $(".flipbox3").hide();
            $("#text1").show();
        }
    });
}

CSS:

.flipbox0 {
    -webkit-transform: rotateY(0deg);
    opacity: 1;
    background-color: #D5E04E;
    background-position: initial initial;
    background-repeat: initial initial;
    width:250px;
    height:300px;
    border:3px solid #FF9900;
    border-radius:25px;
    z-index:1;
}
.spans {
    margin-left: 0%;
    margin-top: 80%;
    position: absolute;
    background-color: #FFF;
    top: -23%;
    width: 100%;
    text-align: center;
}
#text1 {
    margin-top: -35%;
    z-index: 2;
    position: absolute;
    width: 35%;
    margin-left: 1%;
    text-align: justify;
}

どんな助けでも大歓迎です。前もって感謝します。