CSS3 transform image and text

Question

I've been trying to make an illusion of a card-draw and when you hover the mouse over the card it spins and becomes bigger so you can read the text better. The problem is that when you hover the mouse on the image the image works just fine but the text (which is randomly generated so I can't hardcode it) does not become bigger, it just disappears. Is there a way to make sure the text follows the image?

Here is the code:

CSS:

#CardHeader {

    top: 50%;
    left: 45%;
    position: fixed;
    z-index: 1;
}

#CardText {
    top: 65%;
    left: 45%;
    width: 200px;
    position: fixed;
    z-index: 1;
}

#cardImage {
    height: 300px;
    width: 200px;
}

.cardDiv {
    top: 50%;
    left: 45%;
    position: fixed;

    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -moz-animation: fadein 2s; /* Firefox */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera */
    animation: fadein 2s;

    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;

    text-align: center;
}

.cardDiv:hover {
    -webkit-transform: rotate(360deg) scale(2);
    -moz-transform: rotate(360deg) scale(2);
    -o-transform: rotate(360deg) scale(2);
    -ms-transform: rotate(360deg) scale(2);
    transform: rotate(360deg) scale(2);
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

HTML/ASP.NET:

<div class="cardDiv" runat="server">

    <asp:Label ID="CardHeader" runat="server"></asp:Label>
    <asp:Label ID="CardText" runat="server"></asp:Label>

    <asp:Image ID="cardImage" runat="server" ImageUrl="~/Images/kort.png" Visible="false"/>
</div>

TL;DR:

Image rotates and scales, text does not. Suggestions?

EDIT: Fiddle to illustrate problem: http://jsfiddle.net/4ZQ58/

Answer 1

The problem is that you have applied fixed positioning for everything except the <img>. Fixed positioned elements are positioned relative to the window itself, So when you rotate it flies out of the window. using absolute positioning relative to the parent div will fix the issue

JSFiddle Full Screen Demo

JSFiddle