位置固定的“按钮”，旋转90度，固定在屏幕右侧

Question

对于作业，我需要添加一个90度的div，该div固定在屏幕的右侧，以便向下滚动时，按钮随屏幕一起移动。

问题是，如果我将div旋转90度（使用自举程序或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>