html - 旋转的 div 不粘在视口(viewport)的右边界上(向左平坦)

标签 html css rotation transform

<分区>

所以我试图将这个绝对定位的红色 div 与完全向右的文本对齐,我正在使用变换和旋转来翻转 div 但在此过程中,div 保持 float 在右边界旁边视口(viewport),我想完全对齐右边框。

我怎么能用 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>

最佳答案

您可以这样调整代码:

<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>

关于html - 旋转的 div 不粘在视口(viewport)的右边界上(向左平坦),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50761598/

上一篇:css - 为什么我的 svg 动画不起作用?

下一篇:javascript - 使用 JavaScript 根据网站 URL 更改 div 背景图片

相关文章:

java - 旋转 Canvas 和绘制位图性能

javascript - 使用 Jquery 添加事件监听器

javascript - 如何显示/隐藏输入类型 :text when button is click

html - 图像上的透明文本层

html - ASP.NET View 中文本旁边的图像

html - 更改 :before when :hover over main DIV?

html - 列出有分隔但没有边距和填充的元素

css - 定位相对中心屏幕和圆 Angular

android - 我可以旋转/缩放 FloatingActionButton 或 ImageView 中的可绘制动画吗

ios - 方向更改后如何避免调整 UITableView(旋转)单元格的大小?