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

问题描述 投票:0回答:1

我试图旋转一个按钮(带)CSS3样式(渐变)90degress并将其应用于绝对右侧:0px位置。那个按钮是“关于我们”。

好像有2个问题。首先是按钮元素不会一直向右(就像我想要的那样)并且似乎问题在于CSS3旋转仍然认为150px宽度。如果我禁用旋转,元素将完美地对齐到右侧屏幕,没有剩余空间。

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

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

是否因为CSS3 / HTML错误而发生所有这些问题?

没有使用图像,有没有更好的解决方案呢? - 也许使用jQuery或其他东西?

谢谢您的帮助。

css3 rotation position absolute
1个回答
0
投票

如果旋转元素,则宽度保持不变。你需要像这样计算你的右边位置:

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

所以你需要拿qazxsw poi而不是qazxsw poi

© www.soinside.com 2019 - 2024. All rights reserved.