我能够使用在线示例在css中重现旋转的3D立方体。现在我正在分析代码，以便我了解代码的含义并理解它是如何工作的。 但有一点我不明白，我知道“过渡”属性让我在从一种风格转换到另一种风格时添加效果。 （例如，更改元素的宽度）但是在可以找到的代码here中，它以我不理解的方式使用。
-webkit-transition: -webkit-transform 2s linear;
如果我把这段代码留下来，立方体看起来和行为完全相同，我不明白它的作用以及是否有必要。
感谢您的帮助！
答案 0 :(得分：0)
-webkit-是WebKit浏览器上使用的前缀，用于不一定具有完全支持且处于测试/实验阶段的属性。 CSS世界中还有其他几个前缀。一些比较流行的是：-moz-（Firefox），-o-（Opera）和-ms-（Internet Explorer）。
此处-webkit-transition:是带有WebKit前缀的transition属性，而-webkit-transform是带有WebKit前缀的transform属性。
如果我们查看可以使用...以获得浏览器支持，我们会在某些移动浏览器上看到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;
我不理解的是“变换2s线性”添加到立方体。
这会为分配给多维数据集的transform属性添加两秒线性过渡（动画）。如果没有这个，转换属性将立即更改，但有了这个，这个更改将逐渐超过两秒。
这是一个JSFiddle demo我掀起了transition财产的实际行动。这里我们的第一个数字在悬停时立即从红色变为绿色，但我们的第二个数字需要2秒才能改变。
您链接到的代码中的转换似乎对该对象没有任何影响。