Разница между transform: translate3d (50%, 0,0) и слева: 50% в css?

Как преобразование: translate3d (50%, 0,0) отличается от слева: 50% в css? heres jsfiddle, который я сделал.

transform: translate3d(50%,0,0)

и

left:50%;

2 ответа

translate3d(50%,0,0) рассматривает процент от самого элемента, поэтому он переводится с левой половины размера элемента.

Левая часть div, которая расположена абсолютной в скрипке, относится к контейнеру div, который расположен относительно, поэтому left:50%; составляет 50% этого контейнера.


Left значение описывает ширину, связанную с родительским элементом (или что бы было, если был установлен width :100%) Значения transform описывают относительно своей ширины Поскольку вы явно задали ширину, два результата отличаются друг от друга.

licensed under cc by-sa 3.0 with attribution.