Question

我有一个图像和div在它上面，它作为图像的包装，我试图旋转一个方形div而不是说45度。给它一个像钻石一样的形状，所以实际上是因为图像被切成菱形的形状。

问题是，当我旋转div时，图像和其他内容也会旋转，而不是旋转那些图像让我们说-45deg将它们带到原始位置。

上面的内容涉及很多旋转，这几乎是不必要的，而且对于我来说，对于不同大小的图像和文本等来说，它并不是那么简单。

如果只有我可以解决上面的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;
}

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

0 个答案: