什么是CSS转换：translate（）属性最终用于？

Question

在CSS3中，动画是在各种供应商前缀下引入的，具有过渡属性。现在，至少在纯CSS中，有两种方法可以使元素更改位置。

1. 将元素的位置设置为绝对位置并摆弄left: right: top:和bottom:
2. 使用-vendor-transform:translate(X,Y,Z)

现在，严格按照transform:translate()的要点，除了一个人使用translateZ()的能力之外，它们之间的唯一区别是后者不是报告值;除了解析属性本身之外，转换不是计算样式。但是，如果没有必要，后者实际上是position:fixed配置中动画和定位元素的更好选择吗？

我特别感兴趣的是制作一个需要在移动设备和浏览器上运行的非常繁重的webapp，因此向后兼容性并不是一个问题。如今，移动浏览器往往至少是“现代的”。

所以最终，我的问题是，究竟是什么transform:translate()，根据CSS3规范的制作者？它被构建用于LRTB转换，它会是什么？当采用硬件加速（-webkit-transform: translateZ(0);）时，为了渲染速度，动画平滑度和视觉稳定性，可以以一种明显优越的方式使用它？对于那些不知道的人，有时webkit元素会在硬件加速环境中闪烁。

无论如何，我只是为我的网络应用寻找最好和最新的布局解决方案，这些解决方案可以最有效地利用CPU和GPU，因此它们可以在非常优化的FPS下运行（就过渡和，在某些情况下，滚动是有关的）这是最理想的平滑类型的一个很好的例子是http://www.webkit.org/blog-files/leaves/（是的，我确实阅读了它的来源。）

任何输入？

Answer 1

我知道这是一篇较旧的帖子，但是当我想知道同样的问题时，我发现这篇文章非常有用：

http://css-tricks.com/tale-of-animation-performance/

Answer 2

  

究竟是什么变换：translate（），根据CSS3规范的制造商？

It says：

  

为了向后兼容现有的SVG内容，本规范支持[SVG11]中'transform'属性定义的所有变换函数。

至于问题的其他部分，不确定是否可以给出一般答案。

我认为最好针对您的特定情况进行一些性能测试。如果您的应用程序设计精良，那应该不难做到。此外，此类设计可能允许按设备进行优化，其中分别使用转换和偏移。

Answer 3

不确定为什么还没有回答这个问题，但 translate 属性不会导致 CLS（内容布局偏移）。换句话说，当页面加载或视口发生变化时，CLS 的内容会有些静态。如今，网络应用会因 Google 灯塔的性能而受到惩罚。