Header Ads Widget

Ticker

6/recent/ticker-posts

Obtener valores de CSS Translate con JavaScript

 ¿Cómo se obtiene una translateXtranslateYtranslateZvalor en JavaScript?

Resulta que necesitas leer matrices de transformación. Pero puede resultar bastante sencillo.

Matrices

Los navegadores convierten los transformvalores en matrices 2d3dsegún las transformaciones aplicadas.

  • Los navegadores crean 3dmatrices si aplica transformaciones 3D (ejes X, Y, Z).
  • Los navegadores crean 2dmatrices si aplica transformaciones 2d (solo ejes X, Y).

Podemos obtener la matriz a través de JavaScript con getComputedStyle.

const style = window.getComputedStyle(element)
const matrix = style.transform || style.webkitTransform || style.mozTransform

Echemos un vistazo a algunos ejemplos:

.two-d {
  transform: translateX(10px) translateY(20px);
}
Matriz de transformación 2d
.three-d {
  transform: translateX(10px) translateY(20px) translateZ(30px);
}
Matriz de transformación 3d

Matrices 2d vs 3d

Preste atención a los valores de la matriz de arriba. Puede notar esto:

Matriz 2d

Una matriz 2d tiene 6valores.

  1. El quinto valor es translateX
  2. El sexto valor es translateY
Matriz de transformación 2d

Matriz 3d

Una matriz 3d tiene 16valores.

  1. 13º valor es translateX
  2. El valor 14 es translateY
  3. 15to valor es translateZ
Matriz de transformación 3d

Obtener los valores de traducción

Una vez que conocemos el patrón, extraer los valores es fácil. Primero, necesitamos saber con qué matriz estamos tratando.

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'

Si la Matriz lo es 2d, podemos obtener valores translateXtranslateYvalores como este:

const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ')
if (matrixType === '2d') {
  const x = matrixValues[4]
  const y = matrixValues[5]
}

Si la matriz es 3d, podemos obtener los valores translateXtranslateYtranslateZlos valores de esta manera:

const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ')
if (matrixType === '3d') {
  const x = matrixValues[12]
  const y = matrixValues[13]
  const z = matrixValues[14]
}

Empaqué esto en una función agradable para que la usemos.

/**
 * 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]
    }
  }
}

Usándolo:

const {x, y, z} = getTranslateValues(element)

💥.

Solo transformaciones simples

getTranslateValuesfunciona solo si translatese declara antes que otras transformaciones. Esto se debe a que los valores de transformación se apilan entre sí.

Expliquemos esto con un ejemplo de matriz 2d.

Digamos que tienes este elemento.

.element {
  transform: translateX(10px) translateY(20px);
}
Matriz de transformación 2d

Ya conoces estos:

  • El quinto número es 10el mismo valor quetranslateX
  • El sexto número es 20, que es el mismo valor quetranslateY

Ahora agreguemos una rotatetransformación detrás de translateXtranslateY.

.element {
  transform: translateX(10px) translateY(20px) rotate(10deg);
}
Traslade y luego gire.

No hay diferencia en los valores quinto y sexto:

  • El quinto número es 10el mismo valor quetranslateX
  • El sexto número es 20, que es el mismo valor quetranslateY

Pero mira lo que pasa si tú rotateprimero.

.element {
  transform: rotate(10deg) translateX(10px) translateY(20px);
}
Gire y luego traduzca.
  • El quinto número es 6.37511cuál es el NO para lo que escribimostranslateX
  • El sexto número es 21.4326, que es el NO para lo que escribimostranslateY

¡Solo toma nota de esto!

Obtener otros valores de transformación en JavaScript

No he tenido la oportunidad de tratar scaleskewrotateaún, pero tenía curiosidad. Así que busqué en Google y encontré algunas respuestas:

Creo que los cálculos funcionan con transformaciones individuales. No estoy seguro de que funcionen si las transformaciones se apilan unas sobre otras. (Por ejemplo, skew -> rotateda un valor muy diferente en comparación con rotate -> skew).

¡Mantenlo simple, supongo!

Obtenga una colección de fragmentos de JavaScript útiles

Incluye cosas como:

  1. Mostrar y ocultar elementos
  2. Obtener elementos enfocables del teclado
  3. Obtener valores CSS en JavaScript
  4. ¡Y muchos más!

Deje su nombre y correo electrónico a continuación para obtener esta colección gratis :)

Publicar un comentario

0 Comentarios