css - transform :translate3d(50%, 0,0) 和 left :50% in css? 之间的区别

Question

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

transform: translate3d(50%,0,0)

和

left:50%;

Answer 1

translate3d(50%,0,0) 考虑元素本身的百分比，因此它是从元素大小的左半部分开始翻译的。

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