Css rotation

HTML & CSS
1 

    /* Safari */
-webkit-transform: rotate(-90deg);
    /* Firefox */
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

okay, so I am using the code above, when it rotates it is also pushed some pixels to the left, and the problem is that firefox and safari seem to push it about 45 pixels to the left while internet explorer is pushing it about 90px making it hard for me to position these elements, is there an easy way to get the 3 browsers to have the same element rotated and either not push it to the left or push the element the same distance?

2

Firefox and Safari aren’t pushing it to the left, they are rotating from center of item. You can change that by adding transform-origin like this (value format is similar to background-position):

transform-origin: left center;
3

thank you so much, you helped me find this


-moz-transform: translate(100px) rotate(20deg);

with that I can set the pixels needed on internet explorer and push the element the pixels needed in firefox to be at the correct position.