1

我有一个图像和一个图像，div它作为图像的包装器工作，我试图将一个方形 div 旋转超过 45 度。给它一个类似钻石的形状，所以实际上它是在图像被切割成类似钻石的形状时出现的。

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

上面的操作涉及大量旋转，这几乎是不必要的，而且对于不同大小的图像和文本等，我真的不是那么简单。

如果我能找出一些东西，通过它在上面的 div 上旋转并且其中的元素保持原样，那就太好了。

任何人都可以提出任何建议吗？

My markup is:

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

CSS:

.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;
}
4

0 回答 0