Question

How could I realize a button which is turned 90° to the right or to the left by default? I dont want to let him turn onClick, but he should be already turned when the page is loading?

Additionally how could I position this button in a vertical center rightsided to a grid?

Like this:

Thanks,
zY

Answer 1

DEMO FIDDLE

<div class="grid">
    <div class="block block_a">
        <div class="content"></div>
    </div>
    <div class="block block_a"></div>
    <div class="button"> button </div>   
</div>

---

var btn = $('.button');
btn.css('transform','rotate(90deg)'); 

a fix for IE would be replacing the div with an image or just set a separate css playing around with the button styles.

---

As the OP asked ‘…Argh! please… make it work in IE!?…’ 😉 here is an example on how to do that:

DEMO FOR IE 8,7,(and believe it or not) 6!

Just add to the previous code – and modify for your needs the ‘px’ to best position the DIV

if($.browser.msie && $.browser.version<="8.0"){
    btn.css({
        filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)',
        top:'100px',
        left: '184px'   
    });   
}

ONE ONLY THING… (sad but true)

The IE DX filter only permits 4 stages of rotation (1,2,3,4) , so you won’t be able to rotate an element by a fancy degreed position like 37° or doing like : BasicImage(rotation=2.3).