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

标签 css rotation position absolute

我试图将按钮(带有)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/

相关文章:

Javascript 样式与 CSS 样式表

css - 更改音频播放器的轨道位置

html - 有没有办法将导航栏中 li 下的下拉菜单居中?

css - 添加 CSS 边框更改 HTML5 网页中的定位

css - 无法通过 flask 中的CSS更改背景图像大小

html - 图片高度与表格高度不匹配

html - 让引导表单元格填充可用区域,在溢出时滚动

iphone - 如何防止模态 UIImagePickerController 旋转?

c# - C# 中的旋转文本对齐

swift - 在 Swift iOS 中设置设备方向