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 上。使覆盖层透明。希望有帮助。