css - 使用 CSS3 旋转按钮并将其应用于绝对正确的位置不起作用

Question

我试图将按钮(带有)CSS3 样式(渐变)旋转 90 度并将其应用到绝对右侧:0 像素位置。该按钮是“关于我们”。

好像有两个问题。首先是按钮元素没有一直向右移动(就像我想要的那样)，而且问题似乎出在 CSS3 旋转中，它仍然认为 150px 宽度。如果我禁用旋转，该元素将与右侧屏幕完美对齐，没有遗漏任何空间。

我还发现，在谷歌浏览器中，当我将鼠标悬停在“Kaj točno delam”按钮上时，它没有正确应用渐变 - 这意味着在渐变开始之前按钮上有 1 像素(或 2 像素)的黑色空间(从左到右) - 然而，当处于正常(水平)模式或正在向右转动时(当我测试时)，这不会发生。这也很奇怪，因为在使用 Chrome 开发者工具切换元素时，它并没有显示得那么大:悬停。

使用 Internet Explorer 时，垂直按钮“关于我们”只有在顶部(其他任何地方)按下时才有效。

所有这些问题的发生都是因为 CSS3/HTML 错误吗？

有没有更好的解决方案可以在不使用图像的情况下做到这一点？ - 也许使用 jQuery 或其他东西？

感谢您的帮助。

Answer 1

如果你旋转一个元素，宽度保持不变。您需要像这样计算您的正确位置:

-(width/2-height/2) = -(150/2-27/2) = -61,5

所以你需要取 right: -61,5px; 而不是 right: 0;