Web 开发 90" 可粘贴按钮右侧屏幕答案

【问题标题】：Web Development 90" stickable button right side screenWeb 开发 90" 可粘贴按钮右侧屏幕
【发布时间】：2021-11-22 03:32:24
【问题描述】：

我正在尝试创建一个固定在屏幕右侧的按钮。我想要这个按钮转动 90" 并垂直保持 50%。我在网上找不到很多帮助，也许你们可以提供帮助。请参阅下面的代码，它目前不是垂直居中对齐的。

我还添加了一张外观图片。提前致谢！

我当前的代码：

       HTML
 <button type="button" class="button">
     <span class="button__text">Interaction Designer <br> @ Company</span>
     <span class="button__icon"></span>
 </button>

CSS
.button {
    position: absolute;
    display :flex;
    align-items: center; 
    justify-content: center;
    z-index: 999;
    top: 50%;
    right: 0;
    transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);

Picture 2

【问题讨论】：

标签： html css web

【解决方案1】：

body {
    margin: 0;
}

.button {
    position: fixed;
    z-index: 999;
    top: calc(50% - 120px);
    left: unset;
    right: -51px;
    -webkit-transform: rotate(-90deg) translate(-50%, 0%);
    -moz-transform: rotate(-90deg) translate(-50%, 0%);
    -o-transform: rotate(-90deg) translate(-50%, 0%);
    -ms-transform: rotate(-90deg) translate(-50%, 0%);
    transform: rotate(-90deg) translate(-50%, 0%);
}

 <button type="button" class="button">
     <span class="button__text">Interaction Designer <br> @ Company</span>
     <span class="button__icon"></span>
 </button>


<div style="height:100vh;"></div>
<div style="height:100vh;"></div>

【讨论】：

你是英雄！谢谢！ :)