Intento de cubo 3D rotativo responsive

Parece que he logrado hacer que el cubo sea responsive usando el siguiente código bajo '1'. Si alguien tiene comentarios o conocimiento de un método mejor, ¡me gustaría escucharlo!

El siguiente método se basa en el conocimiento de que los valores de 'translateX' y 'translateZ' utilizados por los lados del cubo, se supone que son la mitad del ancho del contenedor del cubo (siendo translateZ la versión negativa). Describí esto en mi respuesta anterior.

1. Usar % para el ancho del padre, establecer los lados del cubo usando variables CSS, actualizar variables usando JS

Usar % probablemente sea lo mejor que veo, ya que los cubos se ajustarán a sus contenedores padres. Esto es especialmente conveniente si los padres del cubo están dentro de contenedores que ya son responsive. Otras unidades pueden ir más allá de los contenedores padres, por ejemplo, haciéndolos más grandes que las columnas de la cuadrícula, y causar que los elementos se superpongan.

El problema con este método es que no podremos establecer los valores de transformación a la mitad de esto en CSS, ya que no puedes establecer transform a un %. Para solucionar esto, usa JS:

• en CSS, ten un pseudo-elemento ::root que contenga variables para representar las propiedades translateX y translateZ utilizadas por los lados del cubo (aquí, se les han dado cantidades predeterminadas, pero estas cambiarán al cargar la página):

:root {
  --pos-translate-amount: 170px;
  --neg-translate-amount: -170px;
}

• usa estas variables como marcadores de posición para las propiedades respectivas de los lados del cubo:

.frente {
  transformar: translateZ(var(--pos-translate-amount));
}

.atrás, .back-overlay {
  transformar: translateZ(var(--neg-translate-amount)) rotateY(270grados);
  transform-origin: center izquierda;
}

.izquierda {
  transformar: rotateY(-270grados) translateX(var(--pos-translate-amount));
  transform-origin: top derecha;
}

.derecha {
  transformar: translateZ(var(--neg-translate-amount) rotateY(180grados);
}

Luego en JS, podemos calcular y actualizar estas variables al cargar la página y al cambiar el tamaño de la pantalla. Como los números para estas variables serán la mitad del ancho del contenedor del cubo padre, obtendremos el valor de este ancho, luego lo usaremos para calcular y actualizar los valores de estas variables. Hacemos esto de la siguiente manera:

• obtener el elemento raíz, que contiene variables que actualizaremos

let root = documento.querySelector(':root');

• obtener el primer elemento del cubo, para que podamos extraer su ancho

const cube = documento.querySelector('.photo-cube');

• crear un objeto para contener el objeto CSS devuelto por getComputedStyle

let cssObj = {};

• crear una variable para mantener el ancho del cubo que usaremos para calcular las variables de traslación.

let cubeWidth = Number(0);

• devolución de llamada para los eventos de carga de página y cambio de tamaño de pantalla, que actualizarán las variables utilizadas por los lados del cubo
  • obtener los estilos del contenedor del cubo padre usando getComputedStyle, luego obtener su ancho del objeto usando su propiedad 'width' (que devolverá el valor como px).
  • usar el ancho para actualizar las variables utilizadas por los lados del cubo
  • el valor de pos-translate-amount es la mitad del ancho del cubo; neg-translate-amount es lo mismo pero negativo

función setTransformAmounts() {
  cssObj = window.getComputedStyle(cube, nulo);
  cubeWidth = parseInt(cssObj.ancho);
  root.estilo.setProperty('--cantidad-traducción-pos', `${Number((cubeWidth expresiones 2))}px`);
  root.estilo.setProperty('--cantidad-traducción-neg', `${Number(-(cubeWidth expresiones 2))}px`);
}

• al cargar la página + cambiar tamaño, ejecutar la función para actualizar variables utilizadas por los lados del cubo

addEventListener(load, setTransformAmounts);
addEventListener(resize, setTransformAmounts);

Otros métodos potenciales

2. Usar la unidad relativa 'vw'

Si no se usa %, otra opción podría ser usar 'vw' para establecer cosas en relación al ancho de la ventana gráfica. Los valores de transformación se pueden establecer a la mitad de eso, sin necesidad de JavaScript. Sin embargo, usar vw variaría mucho el tamaño dependiendo del ancho de la pantalla, por lo que tendríamos que usar suficientes consultas de medios para tener en cuenta esto. Además, tendríamos que asegurar que el tamaño nunca excediera el contenedor de columna principal. Esto tendría que verificarse manualmente, lo que no es ideal.

3. Otras unidades relativas

Otras unidades relativas como em no funcionarán ya que son relativas al tamaño de fuente y generalmente no se ajustan con el ancho de la pantalla. Esto significa que podrían exceder a sus contenedores principales en tamaño y causar problemas de diseño.

Una vez más, estaría muy agradecido si alguien tuviera comentarios o sugerencias mejores.

Muchas gracias de antemano,

Andrew