CODEWITHSUNDEEP
cssrotation
Taly Emmanuela
Taly Emmanuela

Reputation: 205

CSS3 rotate div but keep background without rotation

Is there a way to use transform rotate a div but keep the background from rotating with it? if not is there another solution with a jQuery or something?

Upvotes: 3

Views: 4748

Answers (3)

Yoose Alidoost
Yoose Alidoost

Reputation: 31

u can try this

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

and this style

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

Upvotes: 3

Panshul
Panshul

Reputation: 956

Try using 2 div blocks and overlay the div with rotating content over the fixed background div. Make overlay transparent. Hope it helps.

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

just add an outside wrapper with the background and rotate the inner element instead.

Upvotes: 0

Related Questions