[CSS Translation Extract] Function to extract translation values from CSS transform value #css

get-translation.js

/**
 * Extracts the translation values from a given CSS transformation.
 * @param {string} transformValue The CSS transform string from which the translation values will be extracted (e.g. ‘translate3d(10px, 25px, 30px)’)
 * @returns {object} translation values found in the given transform (e.g. { x: 10, y: 25, z: 30 })
 */
function getTranslation(transformValue) {
 	var matches = transformValue.match(/translate(3d)*\((\d+.?\d*(px)?),\s*(\d+.?\d*(px)?)(,\s*(\d+.?\d*(px)?))?\)/);
	if (matches) {
		return {
			x: parseInt(matches[2]) || 0,
			y: parseInt(matches[4]) || 0,
			z: parseInt(matches[7]) || 0
		};
	}
	return { x: 0, y: 0, z: 0 };
}