css中translate：translate3d（50％，0,0）和left：50％之间的区别？

【问题标题】：Difference between transform:translate3d(50%,0,0) and left:50% in css?css中translate：translate3d（50％，0,0）和left：50％之间的区别？
【发布时间】：2016-08-09 05:50:38
【问题描述】：

css 中的 transform:translate3d(50%,0,0) 与 left:50% 有何不同？这是我制作的jsfiddle。

transform: translate3d(50%,0,0)

和

left:50%;

【问题讨论】：

标签： css transform

【解决方案1】：

translate3d(50%,0,0) 将百分比视为元素本身的百分比，因此它是从元素大小的左半部分转换而来的。

小提琴中绝对定位的div的左边是相对于相对定位的容器div，所以left:50%;是这个容器的50%。

【讨论】：

【解决方案2】：

Left 值描述与父元素相关的宽度（或者如果设置了 width :100% 会是什么）
transform 值描述与其自身宽度相关的宽度

由于您已明确设置宽度，因此 2 个结果不同

【讨论】：