使用transform旋转按钮后，如何自适应贴合屏幕左侧？

这个问题其实是CSS变换的默认原点导致的——默认transform-origin是元素中心，旋转时元素会基于中心偏移，固定margin又没法适配动态内容，用基于元素自身尺寸的变换就能完美解决！

问题根源 #

默认的transform-origin是50% 50%（元素中心），当你设置rotate(-90deg)时，元素的中心位置还停留在left:1px处，但旋转后元素的边界会向左侧偏移，自然就出现了间距。因为内容是动态的，固定像素值的margin肯定没法适配所有情况。

解决方案：用transform-origin + 百分比translate适配动态内容 #

根据你想要的垂直定位，有两种常用的实现方式：

方式一：按钮垂直居中紧贴左侧

如果希望按钮在屏幕左侧垂直居中，使用这个样式：

#callnowbutton {
  position: fixed;
  left: 0; /* 直接贴紧屏幕左侧 */
  top: 50%; /* 垂直居中基准 */
  transform: rotate(-90deg) translateX(-100%) translateY(50%);
  transform-origin: top left;
  box-sizing: border-box; /* 确保padding/border不会影响尺寸计算 */
}

• transform-origin: top left：把旋转原点设为元素的左上角，让这个点固定在屏幕左侧的垂直中心位置。
• rotate(-90deg)：逆时针旋转90度，此时元素会向左上方延伸出屏幕。
• translateX(-100%)：把元素向右移动自身宽度的100%（旋转后的宽度是原按钮的高度），刚好让按钮的边缘贴紧屏幕左侧。
• translateY(50%)：配合top:50%完成垂直居中，抵消旋转后的偏移。

方式二：按钮贴屏幕左下角垂直向上

如果希望按钮从左下角开始垂直向上排列，使用这个样式：

#callnowbutton {
  position: fixed;
  left: 0;
  bottom: 0; /* 固定在屏幕左下角 */
  transform: rotate(-90deg) translateY(-100%);
  transform-origin: bottom left;
  box-sizing: border-box;
}

• transform-origin: bottom left：旋转原点设为元素左下角，固定在屏幕左下角。
• rotate(-90deg)：逆时针旋转后元素向上延伸。
• translateY(-100%)：把元素向上移动自身高度的100%，让按钮的顶部对齐屏幕左下角，完美贴紧左侧。

为什么这个方案适配动态内容？ #

因为translateX(-100%)和translateY(-100%)是基于元素自身的尺寸计算的，不管按钮内容变长变短，百分比都会自动适配，完全不需要手动调整固定像素值！

内容的提问来源于stack exchange，提问作者ebillis