CSS 3D立方体-webkit-transition

Question

我能够使用在线示例在 CSS 中重现旋转的 3D 立方体。现在我正在分析代码，以便了解代码的含义并了解其工作原理。但是有一件事我不明白，我知道“过渡”属性可以让我在从一种样式更改为另一种样式时添加效果。 (例如改变元素的宽度)但是在代码中可以找到here它以我不理解的方式使用。

-webkit-transition: -webkit-transform 2s linear;

如果我将这段代码排除在外，立方体的外观和行为完全相同，我不明白它的作用以及是否有必要。

感谢您的帮助!

Answer 1

-webkit- 是 WebKit 浏览器上使用的前缀，用于表示不一定具有完全支持且处于测试/实验阶段的属性。 CSS 世界中还有一些其他前缀。一些比较流行的是:-moz- (Firefox)、-o- (Opera) 和 -ms- (Internet探索者)。

这里的-webkit-transition:是WebKit前缀的transition属性，-webkit-transform是WebKit前缀的 >转换属性。

如果我们查看 Can I Use... 浏览器支持，我们会看到 the transition property在某些移动浏览器上需要 -webkit- 前缀。我们还会看到 the transform property需要 -webkit- 前缀才能在很多 WebKit 浏览器上工作。

例如，为了在 Android 浏览器上为我们的 transform 属性提供一个 transition，我们需要使用:

-webkit-transition: -webkit-transform 2s linear;

在完全支持transform 和transition 的浏览器上，我们可以通过使用达到同样的效果:

transition: transform 2s linear;

为了安全起见，我们还可以满足需要在 transform 属性上使用 WebKit 前缀的浏览器，但可能已经在 transition 上删除了前缀属性 - 虽然这可能是不必要的:

transition: -webkit-transform 2s linear;

---

The thing I dont understand is what the "transform 2s linear" adds to the cube.

这会向分配给立方体的变换属性添加两秒钟的线性过渡(动画)。如果没有这个，transform 属性会立即改变，但有了这个，改变会在两秒内逐渐发生。

这是一个JSFiddle demo我已经开始使用 transition 属性。在这里，我们的第一个图形在悬停时立即从红色变为绿色，但我们的第二个图形需要 2 秒才能改变。

您链接到的代码中的转换似乎根本不会对对象产生任何影响。