旋转的 div 不粘在视口的右边界（向左平坦）[重复]答案

【问题标题】：Rotated div not sticking to the right border of the viewport (flats to the left) [duplicate]旋转的 div 不粘在视口的右边界（向左平坦）[重复]
【发布时间】：2018-06-08 13:21:56
【问题描述】：

所以我试图将这个绝对定位的红色 div 与文本完全对齐到右侧，我正在使用变换和旋转来翻转 div 但在过程中 div 保持浮动在右侧边框旁边视口，我想完全对齐到右边框。

我怎么能用 css 解决这个问题？

body{position:relative;}

<div style="padding:15px 125px 15px 15px; background-color:red; display:flex; align-items:center; z-index:999999999999999;  position:absolute; right:0px; top:40%; transform: rotate(-90deg); transform-origin:center;">
    <i class="fa fa-cutlery" style="color:black; font-size:20px; margin-right:10px;"></i>
	<span style="font-size:30px; color:black;">Reservar</span>
</div>

【问题讨论】：

标签： html css rotation transform

【解决方案1】：

你可以这样调整代码：

<div style="padding:15px 125px 15px 15px; background-color:red; display:flex; align-items:center; z-index:999999999999999;  position:absolute; right:0px; top:0; transform:rotate(-90deg) translateY(-100%);transform-origin:top right;">
    <i class="fa fa-cutlery" style="color:black; font-size:20px; margin-right:10px;"></i>
	<span style="font-size:30px; color:black;">Reservar</span>
</div>

【讨论】：