Getting CSS Translate Values with JavaScript

Getting CSS Translate Values with JavaScript

zellwk.com zellwk.com1 year ago in#Dev Love68

24th Jun 2020 How do you get a translateX, translateY or translateZ value in JavaScript? Turns out, you need to read transform matrices. But it can be quite easy. Matrices Browsers turn transform values into 2d or 3d matrices depending on what transformations you applied. Browsers create 3d matrices if you apply 3d transforms (X, Y, Z axes). Browsers create 2d matrices if you apply 2d transforms (X, Y axes only). We can get the matrix via JavaScript with getComputedStyle. const style = window.getComputedStyle(element) const matrix = style.transform || style.webkitTransform || style.mozTransform Let’s have a look at some examples: .two-d { transform: translateX(10px) translateY(20px); } .three-d { transform: translateX(10px) translateY(20px) translateZ(30px); } 2d vs 3d matrices Pay attention to the matrix values above. You may notice this: 2d Matrix A 2d matrix has 6 values. 5th value is translateX 6th value is translateY 3d Matrix A 3d matrix has 16 values. 13th value is translateX 14th value is translateY 15th value is translateZ Getting the translate values Once we know the pattern, extracting the values is easy. First, we need to know which matrix we’re dealing with. const style = window.getComputedStyle(element) const matrix = style.transform || style.webkitTransform || style.mozTransform // Can either be 2d or 3d transform const matrixType = matrix.includes(‘3d’) ? ‘3d’ : ‘2d’ If the Matrix is 2d, we can get values translateX and translateY values like this: const matrixValues = matrix.match(/matrix.*((. ))/)[1].split(‘, ‘) if (matrixType === ‘2d’) { const x = matrixValues[4] const y = matrixValues[5] } If the Matrix is 3d, we can get values translateX, translateY, and translateZ values like this: const matrixValues = matrix.match(/matrix.*((. ))/)[1].split(‘, ‘) if (matrixType === ‘3d’) { const x = matrixValues[12] const y = matrixValues[13] const z = matrixValues[14] } I packed this up into a nice function for us to use. /** * Gets computed translate values * @param {HTMLElement} element * @returns {Object} */ function getTranslateValues (element) { const style = window.getComputedStyle(element) const matrix = style.transform || style.webkitTransform || style.mozTransform // No transform property. Simply return 0 values. if (matrix === ‘none’) { return { x: 0, y: 0, z: 0 } } // Can either be 2d or 3d transform const matrixType = matrix.includes(‘3d’) ? ‘3d’ : ‘2d’ const matrixValues = matrix.match(/matrix.*((. ))/)[1].split(‘, ‘) // 2d matrices have 6 values // Last 2 values are X and Y. // 2d matrices does not have Z value. if (matrixType === ‘2d’) { return { x: matrixValues[4], y: matrixValues[5], z: 0 } } // 3d matrices have 16 values // The 13th, 14th, and 15th values are X, Y, and Z if (matrixType === ‘3d’) { return { x: matrixValues[12], y: matrixValues[13], z: matrixValues[14] } } } Using it: const {x, y, z} = getTranslateValues(element) 💥. Simple transforms only getTranslateValues works only if translate is declared before other transforms. This is because transform values stack onto each other. Let’s explain this with a 2d matrix example. Let’s say you have this element. .element { transform: translateX(10px) translateY(20px); } You already know these: 5th number is 10 which is the same value as translateX 6th number is 20, which is the same value as translateY Now let’s add a rotate transformation behind translateX and translateY.  » Read More

Like to keep reading?

This article first appeared on zellwk.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply