Html CSS3转换图像和文本

我一直在试着做一个画卡片的错觉，当你把鼠标悬停在卡片上时，它会旋转并变大，这样你就能更好地阅读文本。问题是，当你将鼠标悬停在图像上时，图像工作得很好，但是随机生成的文本无法硬编码，它不会变大，只是消失了。有没有办法确保文字跟随图像

代码如下：

CSS:

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；博士：

图像旋转和缩放，文本不旋转和缩放。建议

---

编辑：用提琴来说明问题：

问题是，你对所有东西都应用了固定的定位，但不包括。 固定定位图元相对于窗本身定位， 因此，当你旋转它飞出窗外。使用相对于父div的绝对定位将解决此问题

---

你能用一个或其他什么东西来复制这个吗？我真的不知道怎么做。。我还以为这只是JavaScript的问题呢？你的问题完全可以用纯HTML和CSS重现，而不需要任何服务器端的东西。你应该为它做一个提琴，如果提琴起作用，那就意味着你当前的代码有问题，其中涉及到一些服务器端的东西！这个问题快把我逼疯了。

<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>