位置 固定“按钮”，转动 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 度，旋转中心位于左上角。
• 然后将带有top: 50% 的btn 放在屏幕中间。
• 并返回顶部宽度为 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>