gam*_*bol 2 html css webkit transform
我尝试过一个 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
| 归档时间： |
|
| 查看次数： |
3454 次 |
| 最近记录： |