变换：translate3d（50％，0,0）和左边：css之间的差异？

Question

转换：translate3d（50％，0,0）与左派有何不同：css为50％？ 继承了我所做的jsfiddle。

transform: translate3d(50%,0,0)

和

left:50%;

Answer 1

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

在小提琴中绝对定位的div的左边是相对于相对位置的容器div，因此left:50%;是此容器的50％。

Answer 2

Left值描述与父元素相关的宽度（或者设置width :100%时的宽度）
transform值与其自身宽度相关描述

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