CODEWITHSUNDEEP
htmlcssrotation
Michael Schmidt
Michael Schmidt

Reputation: 415

Positioning rotated div elements

I am having some difficulty positioning a rotated div element. So far I have:

#side-banner {
transform: rotate(270deg); }

which rotates my div just fine. however, I am having trouble "Pinning" it to the left side. (IE normally I would do something along the lines as: position fixed, left 0px, height 100%, width: whatever).

Upvotes: 9

Views: 11211

Answers (2)

cumul
cumul

Reputation: 874

If you mean you want the banner rotated and be fixed on the left side of the browserwindow, you can use the transform-origin property. By default it is set to 50% 50%. That's 50% of the width and height of the element (the center of the element).

You can try setting the origin to 0% 0%. that's the upper-left corner of the banner and then rotate it around that corner. Now with the banner rotated, the origin has become the left-bottom corner of the banner. You can position it fixed on the left side of the browserwindow like this:

#side-banner {
    poition:fixed;
    left:0;
    top:50%;
    width:300px; /* after rotation this is the height */
    margin-top:150px; /* is 50% of width */
    transform: rotate(270deg);
    transform-origin:0% 0%; /* set to the upper-left corner */
    -ms-transform: rotate(270deg); /* IE 9 */
    -ms-transform-origin:0% 0%; /* IE 9 */
    -webkit-transform: rotate(270deg); /* Safari and Chrome */
    -webkit-transform-origin:0% 0%; /* Safari and Chrome */
}

Edit:
If you want the banner to be the same height as the browserwindow after the rotation, that can be done with javascript or jQuery. Like this:

var width = $(window).height();
var marginTop = Math.round(width / 2);

$('#side-banner').css({
    'width': width,
    'margin-top': marginTop
});

Upvotes: 9

Sheriff_McLawDog
Sheriff_McLawDog

Reputation: 71

I sure wish I could just leave a comment instead, because I am not 100% sure I understand the issue you are facing.

I feel that your problem can be solved by encapsulating your rotated banner div inside a normal one and set the container div's position as fixed and left: 0px. I set up a fiddle to show you what I mean:

http://jsfiddle.net/q7qgn/1/

HTML:

    <div class="pageContainer">
    <div class="bannerContainer">
        <div class="banner">
            &nbsp;banner
        </div>
        <br/>bannerContainer
    </div>
</div>

CSS:

 .pageContainer{
margin: 0px;
background-color: grey;
width: 400px;
height: 400px;
}

.bannerContainer{
background-color: green;
width: 100px;
height:200px;
position: fixed;
left: 0px;
}

.banner{
background-color: red;
width: 100px;
height: 100px;
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
}

Hope this helps!

Upvotes: 1

Related Questions