5

How does the transform:translate3d(50%,0,0) differ from left:50% in css? heres the jsfiddle that i made.

transform: translate3d(50%,0,0)

and

left:50%;

figure

0

2 Answers 2

6

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

The left of the div that is positioned absolute in the fiddle is relative to the container div which is positioned relative, so the left:50%;is 50% of this container.

3

Left value describes width related to parent element(or what it would be if width :100% was set)
transform values describe in relation to its own width

Since you have explicitly set a width, the 2 results are different

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.