Difference between transform: translate3d (50%, 0,0) and left: 50% in css?

Question

How is the conversion: translate3d (50%, 0,0) different from the left: 50% in css? heres jsfiddle I did.

transform: translate3d(50%,0,0)

and

left:50%;

Answer 1

translate3d(50%,0,0) considers the percentage of the element itself, so it is translated from the left half of the element's size.

The left part of the div, which is located absolute in the violin, refers to the div container, which is relatively located, so it left:50%;makes up 50% of this container.

Answer 2

Left , ( , width :100%)
transform

, .