html - CSS3 转换图像和文本

Question

我一直在尝试制作抽牌的错觉，当您将鼠标悬停在卡片上时，它会旋转并变大，以便您更好地阅读文字。问题是，当您将鼠标悬停在图像上时，图像工作正常，但文本(随机生成，因此我无法对其进行硬编码)不会变大，它只是消失了。有没有办法确保文本跟随图像？

代码如下:

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>

长话短说:

图像会旋转和缩放，文本不会。有什么建议吗？

编辑: fiddle 来说明问题:http://jsfiddle.net/4ZQ58/

Answer 1

问题是你申请了fixed除 <img> 之外的所有内容的定位. 固定定位元素相对于窗口本身定位， 因此，当您旋转时，它会飞出窗外。使用相对于父 div 的绝对定位将解决问题

JSFiddle Full Screen Demo

JSFiddle