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>

TL; DR：

图像旋转和缩放，文字没有。建议？

编辑：小提示说明问题：http://jsfiddle.net/4ZQ58/

Answer 1

问题是您已为fixed以外的所有内容应用<img>定位。固定定位元素相对于窗口本身定位，所以当你旋转它时会飞出窗外。使用相对于父div的绝对定位将解决问题

JSFiddle Full Screen Demo

JSFiddle

CSS3转换图像和文本

1 个答案: