问题
Im trying to rotate a button (with) CSS3 styles (gradient) by 90degress and apply it on absolute right:0px position. That button is "About us".
It seems like there are 2 problems. First is that the button element doesn't go all the way to the right (like I want it) and it seems that the problem is in CSS3 rotation that still thinks 150px width. If I disable the rotation, the element is aligned to the right screen perfectly, with no space left out.
Also I found that in Google Chrome, when i hover over the button "Kaj točno delam", it doesn't apply gradient correctly - meaning there is 1px (or 2) of black space on the button before the gradients starts (from left to right) - this however doesn't happen, when being in normal (horizontal) mode, or is being turned to the right (when i tested). It's also strange because that doesn't show as big when using Chrome Developer tools to toogle element :hover.
Using Internet Explorer the vertical button "About us" only works when pressing it on top (and nowhere else).
Do all of this problems happen because of CSS3/HTML bug?
Is there any better solution to do this without using images? - perhaps using jQuery or something else?
Thank you for your help.
回答1:
If you rotate an element, the width stays the same. You need to calculate your right-position like this:
-(width/2-height/2) = -(150/2-27/2) = -61,5
So you need to take right: -61,5px; in stead of right: 0;
来源：https://stackoverflow.com/questions/11930610/rotating-the-button-using-css3-and-applying-it-on-absolute-right-position-doesn