html - 重现 Codepen 结果（CSS 转换）

Question

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

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

Answer 1

在这个特定的示例中，Codepen 自动将供应商前缀应用于某些 CSS 属性。在 的情况下transform，Chrome、Safari、Opera 和 Android 都需要-webkit-前缀，旧版本的 IE 需要-ms-前缀（如此处所列）。

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

例如：

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

将需要更改为：

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