Html 使用CSS3转换旋转div而不旋转其内容

我有一个图像和一个div，作为图像的包装，我试图旋转一个正方形div，比如说45度，使其呈菱形，所以实际上它是在图像被切割成菱形时出现的

问题是，当我旋转div时，图像和其中的其他东西也会旋转，而我必须将这些图像旋转回-45度，以便将它们带到原始位置

这是做上述涉及大量的旋转，这几乎是不必要的，加上它真的不是那么简单，我得到正确的图像和不同大小的文本等

如果我能找出一些东西，通过它上面的div可以旋转，里面的元素保持原样，那就太棒了

有人能提出什么建议吗

我的标记是：

---

你写了我有一个图像和一个div。在你呈现的代码中根本没有div！？您的代码在语义上也很可疑。您使用哪种Doctype？如果我没弄错的话，你只需要在图像和文本周围画一个旋转45°的边框，对吗？因此，最好不要将图像和文本作为要旋转的元素的子元素。图像是否真的属于内容，还是背景图像？抱歉，现在更正，我尝试使用一个span，它是一个内联元素，因为在一行中有多个这样的元素。但是我已经更正了代码。图像是内容img的一部分而不是背景图像。实际上，我想不出任何其他语义解决方案来旋转包装器并将其子对象旋转回来。这样做会使图像变得模糊，文本也变得有点奇怪，不知道为什么会这样。发现了一个相关问题。我唯一能想到的另一个解决方案是我在第一次评论中提到的那个。您必须使用某种覆盖…，但所有这些都会导致额外的元素，这些元素是/是表示性标记。所以这一切都很糟糕，我个人会避免的。

<div class="wrapper" id="01">
    <a href="#">
        <img src="image.gif" />
        <span class="text" id="text01">Lorem Ispum </span>
    </a>
</div>

.wrapper {
    -webkit-backface-visibility: hidden;
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 30px 0 0;
    overflow: hidden;
    float: left;
    -moz-transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
    -moz-transform-origin: center;
    -webkit-transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
    -webkit-transform-origin: center;
    -o-transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
    -o-transform-origin: center;
    -ms-transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
    -ms-transform-origin: center;
    transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
    transform-origin: center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.5,M21=-0.5,M12=0.5,M22=-0.5,SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.5,M21=-0.5,M12=0.5,M22=-0.5,SizingMethod='auto expand');
    cursor: pointer;
}

.wrapper img {
    width: 700px;
    margin: -10px 0 0 -245px;
    -moz-transform: rotate(135deg);
    -moz-transform-origin: center;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transform-origin: center;
    -o-transform-origin: center;
    -ms-transform-origin: center;
    transform: matrix(-0,-0,0,-0,0,0);
    transform-origin: center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0,M21=-0,M12=0,M22=-0,SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0,M21=-0,M12=0,M22=-0,SizingMethod='auto expand');
}

span.text {
    background-color: rgba(255,255,255,0.7);
    -webkit-transform: rotate(180deg);
    margin: -475px 0 0 -1px;
    float: left;
    width: 296px;
    height: 42%;
    z-index: 100;
    position: relative;
    padding: 4px;
    display: none;
    font-size: 1.2em;
}