我试图将按钮(带有)CSS3 样式(渐变)旋转 90 度并将其应用到绝对右侧:0 像素位置。该按钮是“关于我们”。
好像有两个问题。首先是按钮元素没有一直向右移动(就像我想要的那样),而且问题似乎出在 CSS3 旋转中,它仍然认为 150px 宽度。如果我禁用旋转,该元素将与右侧屏幕完美对齐,没有遗漏任何空间。
我还发现,在谷歌浏览器中,当我将鼠标悬停在“Kaj točno delam”按钮上时,它没有正确应用渐变 - 这意味着在渐变开始之前按钮上有 1 像素(或 2 像素)的黑色空间(从左到右) - 然而,当处于正常(水平)模式或正在向右转动时(当我测试时),这不会发生。这也很奇怪,因为在使用 Chrome 开发者工具切换元素时,它并没有显示得那么大:悬停。
使用 Internet Explorer 时,垂直按钮“关于我们”只有在顶部(其他任何地方)按下时才有效。
所有这些问题的发生都是因为 CSS3/HTML 错误吗?
有没有更好的解决方案可以在不使用图像的情况下做到这一点? - 也许使用 jQuery 或其他东西?
感谢您的帮助。
最佳答案
如果你旋转一个元素,宽度保持不变。您需要像这样计算您的正确位置:
-(width/2-height/2) = -(150/2-27/2) = -61,5
所以你需要取 right: -61,5px;
而不是 right: 0;
关于css - 使用 CSS3 旋转按钮并将其应用于绝对正确的位置不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11930610/