How does the transform:translate3d(50%,0,0) differ from left:50% in css? heres the jsfiddle that i made. <pre class="prettyprint"><code>transform: translate3d(50%,0,0) </code></pre> and <pre class="prettyprint"><code>left:50%; </code></pre> <img src="https://i.stack.imgur.com/OptP2.png" alt="figure">

<code>translate3d(50%,0,0)</code> 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 <code>left:50%;</code>is 50% of this container.

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

Tags:

css

transform

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%;

462

asked Mar 12 '23 11:03

Vivekraj K R

1 Answers

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.

195