Question

我在页面右侧制作一个粘滞的固定按钮有一个很大的问题，这个按钮将是一个不同语言的动态文本。

所以，有我的代码，并尝试使用许多单词进行测试，按钮必须贴在右边：

<a href="#" class="button">Contact us</a>

a.button {
    background: #43515a url("http://www.aristaofrotorua.co.nz/rotorua-accommodation/images/email.jpg") no-repeat 88% center;
        font-family: "Myriad Pro";
        font-size: 17px;
        color: white;
        text-transform: uppercase;
        padding: 0 10px;
        outline: none;
        text-decoration: none;
        position: absolute; 
        top: 109px;
        right: 0;
        /*width: 136px;*/
        height: 40px;
        line-height: 45px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        transform: rotate(-90deg);

}

Myfiddle

Answer 1

如果您将transform-origin的默认50% 50%属性更改为100% 100%，则可以解决您的问题。

transform-origin CSS属性允许您修改原点元素的转换。例如，变换起源 rotate（）函数是旋转中心。

see here for more info

这意味着默认情况下，您的元素围绕其中心旋转（左侧为50％，顶部为50％）。因此，当您更改内容时，元素的宽度也会发生变化，移动rotate属性的原点。因此，您需要将变换原点设置为右下角（100％100％），根据您的情况，内容不会移动。所以转换起源也不会移动。

要添加的CSS：

-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
transform-origin:100% 100%;

<强> DEMO

body {
  background: #ededed;
}
a.button {
  background: #43515a url("http://www.aristaofrotorua.co.nz/rotorua-accommodation/images/email.jpg") no-repeat 88% center;
  font-family: "Myriad Pro";
  font-size: 17px;
  color: white;
  text-transform: uppercase;
  padding: 0 10px;
  outline: none;
  text-decoration: none;
  position: absolute;
  top: 109px;
  right: 0;
  /*width: 136px;*/
  height: 40px;
  line-height: 45px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

<a href="#" class="button">Conta sdsdsd s ct us lkjcvgf</a>

CSS - Sticky＆amp;灵活的固定右按钮

1 个答案: