位置 固定“按钮”，旋转 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>