Разница между 2D и 3D-преобразованиями в CSS заключается в том, в каких измерениях они работают. 12

2D-преобразования позволяют перемещать и манипулировать элементами вдоль осей X и Y. 1 Можно перемещать элементы влево-вправо (ось X) и вверх-вниз (ось Y). 1 Для таких преобразований используются функции, например, translate(), rotate(), scale() и skew(). 14

3D-преобразования добавляют дополнительное измерение — ось Z. 12 Это позволяет перемещать элементы к зрителю или от него, создавая ощущение глубины. 1 Для таких преобразований используются функции, такие как translate3d(), rotateX(), rotateY(), rotateZ(), scale3d() и perspective(). 1

Некоторые другие различия:

• Перспектива. 1 Свойство perspective уникально для 3D-преобразований. 1 Оно устанавливает расстояние между зрителем и плоскостью Z, создавая ощущение глубины. 1 Это свойство не существует в 2D-преобразованиях. 1
• Видимость обратной стороны. 1 В 3D-преобразованиях можно контролировать видимость обратной стороны элемента при его повороте. 1 Это не применимо в 2D-преобразованиях, так как там нет понятия глубины. 1
• Вложенные элементы. 1 В 3D-преобразованиях использование свойства transform-style: preserve-3d позволяет вложенным элементам сохранять своё 3D-положение. 1 В 2D-преобразованиях вложенные элементы сглаживаются и не сохраняют 3D-положение. 1