CSS3 вращать div, но держать фон без вращения

Question

Есть ли способ использовать transform, повернуть 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

Попробуйте использовать 2 блока div и наложить div с вращающимся содержимым поверх фиксированного фонового div.Сделать наложение прозрачным.Надеюсь, это поможет.

Answer 3

просто добавьте внешнюю обертку с фоном и вместо этого поверните внутренний элемент.