Entonces, lo que estoy tratando de hacer es asignar cada carácter de una cadena a un lapso. Con cada lapso, estoy usando estilos en línea para cambiar dinámicamente la posición y del carácter en función de la posición actual en la cadena. Luego tomo esta cadena de intervalos y la agrego a una variable que al final contendrá todos los caracteres convertidos en intervalos, y luego los envío al DOM usando innerHTML.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <p id="output"></p> </body> <script> const text = "the dog jumped over the fence"; let output = ""; let i = 0; for (char of text) { output += `<span style="transform: translateY(${i}px)">${char}</span>`; i += 1; } document.querySelector("#output").innerHTML = output; </script> <style> body { background-color: black; } span { color: green; } </style> </html>Sin embargo, ninguno de mis estilos que tienen que ver con la transformación se aplica externamente. Revisé la consola del desarrollador y los tramos tienen los estilos que quería, pero no se están aplicando en la página real. [1] https://i.stack.imgur.com/MoDnq.png
Lo extraño es que esto solo parece estar sucediendo para la propiedad transform CSS. Cuando edito el tamaño de fuente para cada tramo usando la posición actual, obtengo el resultado esperado.
/* When I change the for loop to adjust the font size instead of using transform */ for (char of text) { output += `<span style="font-size: ${i}px">${char}</span>`; i += 1; }esto es lo que obtengo: [1]: https://i.stack.imgur.com/0dk21.png
Cuando intenta traducir los elementos span verticalmente, no ve ningún cambio debido a cómo funcionan los elementos en línea en HTML.
Si desea aplicar una traducción a los span s, primero debe cambiar su estilo de visualización a inline-block , lo que le permitirá aplicarles una transformación mientras los mantiene en la misma línea.
#output span { display: inline-block; }De la wiki w3 css :
elemento transformable
Un elemento transformable es un elemento en una de estas categorías:
todos los elementos cuyo diseño se rige por el modelo de caja CSS, excepto las cajas en línea, las cajas de tabla-columna y las cajas de tabla-columna-grupo no reemplazadas [CSS2]
todos los elementos del servidor de pintura SVG, el elemento clipPath y los elementos renderizables SVG con la excepción de cualquier elemento descendiente de los elementos de contenido de texto [SVG2]
CSS Transform solo funciona en el elemento de bloque. Cambie su span en un elemento de bloque.
span { display: inline-block; color: green; }