html - Positioning rotated div elements -
i having difficulty positioning rotated div element. far have:
#side-banner { transform: rotate(270deg); }
which rotates div fine. however, having trouble "pinning" left side. (ie along lines as: position fixed, left 0px, height 100%, width: whatever).
if mean want banner rotated , fixed on left side of browserwindow, can use transform-origin
property. default set 50% 50%. that's 50% of width , height of element (the center of element).
you can try setting origin 0% 0%. that's upper-left corner of banner , rotate around corner. banner rotated, origin has become left-bottom corner of banner. can position fixed on left side of browserwindow this:
#side-banner { poition:fixed; left:0; top:50%; width:300px; /* after rotation height */ margin-top:150px; /* 50% of width */ transform: rotate(270deg); transform-origin:0% 0%; /* set upper-left corner */ -ms-transform: rotate(270deg); /* ie 9 */ -ms-transform-origin:0% 0%; /* ie 9 */ -webkit-transform: rotate(270deg); /* safari , chrome */ -webkit-transform-origin:0% 0%; /* safari , chrome */ }
edit:
if want banner same height browserwindow after rotation, can done javascript or jquery. this:
var width = $(window).height(); var margintop = math.round(width / 2); $('#side-banner').css({ 'width': width, 'margin-top': margintop });
Comments
Post a Comment