我试图制作一个垂直的徽章＆＃34;与浏览器的左/右边缘对齐。我目前的方法是制作div并将其旋转90度，然后使用position: fixed; left: 0; top: 20%正确放置它，但是我遇到了以下问题：
随着文本变长，小部件变得“分离”＃34;从浏览器的左右边缘。
演示：http://jsfiddle.net/bv3no599/（查看徽章如何通过更长的文字进一步偏离）
当前代码：
<div id="badge-outer-2" style="background: #1508bc;color:#FFFFFF;position: fixed;border-top-right-radius: 5px; border-top-left-radius: 5px;transform:rotate(90deg);top: 50%;padding:8px;font-size:13px;box-shadow:0px 0px 4px rgba(0,0,0,0.4);z-index:99996;cursor:pointer; left: -50px">Not OK when the text is longer and longer</div>
有人能指出我解决这个问题吗？为什么在增加文本长度后它会从边缘移动得更远？
感谢。
答案 0 :(得分：2)
默认情况下，元素的旋转基于其中心。只需使用transform: rotate(90deg)，您就可以围绕其中心轴旋转90度。这导致不同大小元素的边缘最终落在不同的地方。
相反，尝试围绕左下角旋转：
transform-origin: 0 100%;
现在两个元素都将靠近屏幕的左边缘，无论它们有多高，但是你的硬编码left偏移会使它稍微混乱。相反，只需将它们放在left: 0;处，始终将它们粘贴在屏幕的左侧。这样您也不必为每个元素设置新的偏移量。
答案 1 :(得分：0)
这是因为您正在使用
left: -22px;
和
left: -50px;
手动纠正旋转的某些副作用。也就是说，默认情况下，旋转相对于元素的中心旋转，因此在两侧留下空格。发生的事情是，当你＆＃34;低于＆＃34;相对于文本长度的修正，例如 -50px，你得到那个分离 - 尝试将其更改为-80px或-100px以查看我的意思。 （如果你＆＃34;过冲，＆＃34;文字完全消失。）
相反，请使用
transform-origin: left bottom;
从适当的原点旋转，然后设置
left: 0;