html - Position Fixed 'button' ，旋转90度，固定在屏幕右侧

Question

对于一项任务，我需要添加一个旋转 90 度并固定在屏幕右侧的 div，这样如果您向下滚动，按钮就会随屏幕移动。

问题是，如果我将一个 div 旋转 90 度(使用 bootstrap 或 css)，固定位置不会改变，并在 div 的右侧留下一些空白。这同时保持响应。

.popup-btn{
  position: fixed;
  width: 100px;
  height; 100px;
  right: 0;
  top: 50%;
  background-color: green;
  padding: 1%;
  -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

<div class="popup-btn">
    <a href="#">Example div</a>
</div>

我尝试过使用媒体查询并使用类似 right: -5,5% 的值定位权限，但这不是解决此问题的好方法。有谁知道如何正确地将 div 固定到屏幕的右侧？

一个按钮应该如何粘在一边的例子:

Answer 1

您必须使用变换原点来实现此目的。也改了right: 0成为left: 100%并添加了 translateX(-50%)始终位于屏幕中心。

另外，你有一个错误:在高度上，你使用的是 ;而不是 : .我不确定这是不是故意的。

解释:

• 首先将 btn 放在屏幕外。这样它的左上角就是屏幕外的第一个像素。
• 然后使用transform-origin: 0% 0%;将旋转中心设置为左上角。
• 然后以旋转中心左上角旋转90度。
• 然后将 btn 设置为 top: 50%在屏幕中间。
• 返回顶部宽度为 50% 的按钮。因为我们已经将它旋转了 90 度，所以我们需要使用 translateX而不是 translateY将我们的按钮移动其宽度的 50%。

.popup-btn{
  position: fixed;
  width: 100px;
  height; 100px;
  left: 100%;
  top: 50%;
  background-color: green;
  padding: 1%;
  transform-origin: 0% 0%;
  -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg) translateX(-50%);
}

<div class="popup-btn">
    <a href="#">Example div</a>
</div>