CSS3旋转div但保持背景不旋转

Question

有没有办法使用变换旋转div但保持背景旋转？如果不是有另一种解决方案与jQuery或什么？

Answer 1

你可以尝试这个

<div id="container">
   <div id="yourelement"></div>
</div>

和这种风格

        #container{
            position: absolute;
            top:100px;
            left:100px;
            transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            width:300px;
            height:300px;
            overflow:hidden;
        }
        #yourelement{
            position: absolute;
            top:-100px;
            left:-50px;
            transform: rotate(-30deg);
            -webkit-transform: rotate(-30deg);
            -moz-transform: rotate(-30deg);
            -o-transform: rotate(-30deg);
            width:500px;
            height:500px;
            background-image:url(../img/bg.jpg);
        }

Answer 2

只需添加一个带背景的外部包装器，然后旋转内部元素。

Answer 3

尝试使用2个div块并在固定背景div上覆盖旋转内容的div。使叠加透明。希望它有所帮助。