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

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文件：

这是浏览器的输出：

这里，背景图像是固定的，容器在旋转。我想反过来。我，e容器将被固定，背景将旋转。

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(http://i.stack.imgur.com/lndoe.jpg) 0 0 no-repeat;
}

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