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

Question

有没有一种方法可以使用 transform 旋转 div 但不让背景随之旋转？如果没有，是否有其他带有 jQ​​uery 或其他东西的解决方案？

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);
        }