我尝试过一个 CSS 代码，其中一个包含 -webkit代码 另一个没有，但输出是相同的。我使用的是 Google Chrome，但是当我删除转换时:rotate(45deg);变换源:20% 40%； div不会受到webkit的影响，所以我不知道为什么我们需要添加这个webkit？
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding: 10px;
border: 1px solid black;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
/*-webkit-transform: rotate(45deg);*/ /* Safari 3-8 */
/*-webkit-transform-origin: 20% 40%;*/ /* Safari 3-8 */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
</style>
</head>
<body>
<h1> The transform-origin Property</h1>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>
最佳答案
CSS 中的内容由 W3C 决定。 CSS 的每次新迭代及其所有功能均由 W3C 开发或采用，并且他们发布了任何给定版本的 CSS 中应包含哪些内容的规范，请参阅 https://www.w3.org/TR/2011/REC-CSS2-20110607/例如。
由于完成一项功能的工作方式可能需要几年时间，因此发布了草稿。浏览器开发人员(例如 Google、Mozilla 和 Microsoft)实现了草案或其中的一部分。由于此时每个浏览器在如何实现方面都有很大的自由度，因此浏览器之间的工作方式可能会有很大差异(即使发布了规范，它们仍然会这样做，但我认为它们的程度要小于在草案阶段)。
本文对前缀进行了更多解释:https://www.lifewire.com/css-vendor-prefixes-3466867
要点是这样的； W3C 可能表示他们想要实现某个功能，或者浏览器可能想要尝试一些新功能。作为一名 Web 开发人员，我不想仅仅因为想测试其中一个浏览器的新功能而破坏所有其他浏览器，我可以选择在我的 CSS 属性前面加上我的目标浏览器的前缀。其他浏览器应该安全地忽略这个 CSS 属性，而我的目标浏览器会读取它。当该功能成为“主流”(通常是 W3C 的规范发布)时，省略前缀可能不会有任何区别。所有浏览器都可能支持它并使用相同的语法，并以相同的方式呈现它。
在您的测试示例中，所有主要浏览器都支持使用 transform，并且您不需要前缀。 https://caniuse.com/#feat=transforms2d
关于html - 为什么我们需要在css中使用-webkit？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51853624/