| 33 | * @returns {Object} |
| 34 | */ |
| 35 | const getTranslateValues = element => { |
| 36 | const style = window.getComputedStyle(element) |
| 37 | const matrix = style['transform'] || style.webkitTransform || style.mozTransform |
| 38 | |
| 39 | // No transform property. Simply return 0 values. |
| 40 | if (matrix === 'none' || typeof matrix === 'undefined') { |
| 41 | return { |
| 42 | x: 0, |
| 43 | y: 0, |
| 44 | z: 0 |
| 45 | } |
| 46 | } |
| 47 | |
| 48 | // Can either be 2d or 3d transform |
| 49 | const matrixType = matrix.includes('3d') ? '3d' : '2d' |
| 50 | const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ') |
| 51 | |
| 52 | // 2d matrices have 6 values |
| 53 | // Last 2 values are X and Y. |
| 54 | // 2d matrices does not have Z value. |
| 55 | if (matrixType === '2d') { |
| 56 | return { |
| 57 | x: matrixValues[4], |
| 58 | y: matrixValues[5], |
| 59 | z: 0 |
| 60 | } |
| 61 | } |
| 62 | |
| 63 | // 3d matrices have 16 values |
| 64 | // The 13th, 14th, and 15th values are X, Y, and Z |
| 65 | if (matrixType === '3d') { |
| 66 | return { |
| 67 | x: matrixValues[12], |
| 68 | y: matrixValues[13], |
| 69 | z: matrixValues[14] |
| 70 | } |
| 71 | } |
| 72 | } |
| 73 | |
| 74 | export { map, lerp, calcWinsize, getRandomNumber, getMousePos, preloadImages, getTranslateValues }; |