为什么不应用内联变换样式[重复]答案

【问题标题】：Why are inline transform styles not being applied [duplicate]为什么不应用内联变换样式[重复]
【发布时间】：2021-12-31 08:54:06
【问题描述】：

所以我要做的是将字符串的每个字符映射到一个跨度。对于每个跨度，我使用内联样式来根据字符串中的当前位置动态更改字符的 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>

但是，我与 transform 相关的所有样式都没有被外部应用。我检查了开发人员控制台，跨度确实具有我想要的样式，但它们并没有应用于实际页面。 [1]https://i.stack.imgur.com/MoDnq.png

奇怪的是，这似乎只发生在 transform CSS 属性上。当我使用当前位置编辑每个跨度的字体大小时，我得到了预期的输出。

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

【问题讨论】：

标签： javascript html css css-transforms inline-styles

【解决方案1】：

当您尝试垂直翻译 span 元素时，由于内联元素在 HTML 中的工作方式，您看不到任何变化。

如果您想对spans 应用转换，您需要先将它们的显示样式更改为inline-block，这样您就可以对它们应用转换，同时保持它们在同一行中。

#output span { display: inline-block; }

来自w3 css wiki：

可变形元素

可变形元素是其中之一的元素这些类别：

布局受 CSS 盒模型控制的所有元素，除了不可替换的内联框、表格列框和表格列组框 [CSS2]

所有 SVG 绘制服务器元素、clipPath 元素和 SVG 可渲染文本内容的任何后代元素除外的元素元素 [SVG2]

【讨论】：

太棒了，感谢您非常快速和乐于助人的回复:)

【解决方案2】：

CSS 变换仅适用于块元素。将您的 span 更改为块元素。

span {
      display: inline-block;
      color: green;
    }

【讨论】：