html - 重现 Codepen 结果(CSS 转换)

Question

我正在尝试实现 this到我放在一起的页面上的标题中，但我没有运气让它工作。我的悬停工作正常，因为我尝试对它们进行另一个更改(不是转换)并且那里没有问题。但是转换本身不做任何事情。

我无法弄清楚发生了什么，所以我直接将 HTML 和 CSS 复制粘贴到一个新文件中，悬停也不起作用。在那里。可能出了什么问题？它在我的 CodePen 浏览器中运行良好，但在复制/粘贴时却不行。

Answer 1

在此特定示例中，Codepen 已自动将供应商前缀应用于某些 CSS 属性。对于transform，Chrome、Safari、Opera、Android都需要-webkit-前缀，旧版IE需要-ms-前缀(as listed here)。

这意味着您在使用 transform、transform-style、transform-origin、perspective 等属性的地方code> 和 transition，您还需要实现带有供应商前缀的版本。

例如:

.letter {
    ...
    transform-style: preserve-3d;
    ...
}

将需要更改为:

.letter {
    ...
    -webkit-transform-style: preserve-3d;
    -ms-style: preserve-3d;
    transform-style: preserve-3d;
    ...
}