css - 如何旋转背景保持容器固定？

Question

这是我的 HTML 代码:

<style>
#myelement
{
    position: relative;
    overflow: hidden;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
       border:#000000 solid 2px;
       width:500px;
       height:500px;
}

#myelement:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: 0%;
    left: 0%;
    z-index: -1;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);

    background: url(image.jpg) 0 0 no-repeat;
}
</style>


<div id="myelement"></div>

这是 image.jpg 文件:

这是浏览器的输出:

这里，背景图像是固定的，容器是旋转的。我想逆转。即容器将被固定，背景将旋转。

Answer 1

如果我正确理解了你的问题，你只需要在具有背景且容器上没有任何内容的伪元素上应用transform:rotate(如下面的代码片段所示)。

#myelement {
  position: relative;
  overflow: hidden;
  border: #000000 solid 2px;
  width: 100px;
  height: 100px;
}
#myelement:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  z-index: -1;
  transform: rotate(30deg);
  background: url(/image/lndoe.jpg) 0 0 no-repeat;
}

<div id="myelement"></div>