所以我要做的是将字符串的每个字符映射到一个span。对于每个跨度，我都使用内联样式，以便根据字符串中的当前位置动态更改字符的y位置。然后，我将这个span字符串添加到一个变量中，该变量最终将包含转换为span的所有字符，然后使用innerHTML将其输出到DOM中。
<!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>
但是，我的任何与转换有关的样式都没有在外部应用。我已经检查了开发人员控制台，跨度确实有我想要的样式，但它们并没有应用于实际页面。[1]https://i.stack.imgur.com/MoDnq.png
奇怪的是，这种情况似乎只发生在transformCSS属性上。当我使用当前位置编辑每个跨度的字体大小时，我会得到预期的输出。
/* 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;
}
这就是我得到的：[1]：https://i.stack.imgur.com/0dk21.png
当您尝试垂直翻译span元素时，由于内联元素在HTML中的工作方式，您看不到任何更改。
如果要将转换应用于span，则需要首先将它们的显示样式更改为inline-block，这将允许您对它们应用转换，同时使它们保持在同一行中。
#output span { display: inline-block; }
来自w3-css-wiki:
可转换元素
可转换元素是以下元素之一中的元素这些类别：
布局受CSS框模型控制的所有元素未替换的内联框、表列框和表列组箱子[CSS2]
所有SVG绘制服务器元素、clipPath元素和SVG可渲染元素，文本内容的任何子元素除外元件[SVG2]
CSS Transform仅适用于块元素。将span更改为块元素。
span {
display: inline-block;
color: green;
}