为何修改定位属性后，translateY仍始终朝同一方向移动？

先来看你的代码示例：

<div class="one"> 
  <div class="two"></div> 
</div>

.one { 
  position: relative; 
  height: 300px; 
  background: #eee; 
}
.two { 
  width: 50px; 
  height: 50px; 
  background: #999; 
  position: absolute; 
  bottom: 0; 
  /* you can change it to top: 0; */
  transform: translateY(100%); 
}

你的观察完全正确，但这是transform属性的设计逻辑导致的，属于正常行为：

• transform的translate基于元素自身的局部坐标系
  transform的位移计算和position的top/bottom/left/right规则完全独立，它只认元素自己的坐标系：

  • Y轴正方向固定向下，所以translateY(100%)永远表示向下移动元素自身高度的100%，不管你用top还是bottom定位元素。
  • X轴正方向固定向右，translateX(100%)永远表示向右移动元素自身宽度的100%。

• 关于你觉得translateX方向会随left/right改变的错觉
  你之所以会觉得修改left/right时translateX的移动方向变了，其实是视觉上的误解：
  比如当元素用right: 0定位在父元素右侧时，translateX(100%)会让元素向右超出父元素；而用left: 0定位在左侧时，translateX(100%)会让元素向右移动到父元素内部的右侧位置。两种场景下translateX的实际方向都是向右，只是元素初始位置不同，导致视觉上的“移动效果”看起来不一样而已。

简单总结：transform的位移方向是固定基于元素自身的，和position的定位属性无关，这是CSS规范里明确的设计，完全正常～

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