Теперь мы все знаем, особенно из этой красивой статьи, что мы должны предпочесть css-transforms в анимированную позицию.
Но у нас есть выбор между translate() и translate3d()...
Какая из них быстрее?
Translate3d vs translate performance
Ответ 1
На этом сайте приведены тесты, сравнивающие translate(), translate3d() и пару других свойств. По его словам, translate3d() работает быстрее в большинстве браузеров.
Ответ 2
Использование translate3d вызывает анимацию CSS в аппаратное ускорение. Даже если вы хотите сделать базовый перевод 2d, используйте translate3d для большей мощности! Так что "T3d" просто лучше, потому что он рассказывает анимации CSS, чтобы подтолкнуть анимацию в 3d-силу! Вот почему он быстрее. (Ответ Камерона Литтла является доказательством)
Ответ 3
Как предположил оператор cameron, translate3d должен быть быстрее во многих браузерах, в основном тех, которые используют аппаратное ускорение gfx для ускорения рендеринга. особенно на webkit translate3d, был предпочтительным способом принудительного аппаратного ускорения на страницах.
хотя в опыте смены иногда есть один недостаток использования 3D-преобразований - в некоторых комбинациях браузера/версий/os (osx + safari я смотрю на вас) аппаратное ускорение рендеринга может слегка изменить сглаживание шрифта, а также интерполяцию, что вызывает незначительное мерцание или размытие. в большинстве случаев эти ситуации можно использовать, но их следует учитывать.