什么是CSS转换:translate()属性最终用于?

TER*_*Mtm 9 css html5 css3 transitions

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

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

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

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

最终,我的问题是,根据CSS3规范的制造商,到底是什么transform:translate()它是建立在LRTB变换上使用的地方,并且当采用硬件加速(-webkit-transform: translateZ(0);)时,为了渲染速度,动画平滑度和视觉稳定性,是否可以以明显优越的方式使用它?对于那些不知道的人,有时webkit元素会在硬件加速环境中闪烁.

在任何情况下,我只是为我的网络应用寻找最好和最新的布局解决方案,它们可以最有效地利用CPU和GPU,因此它们可以在非常优化的FPS上运行(就转换而言,案例,滚动是关注的)这是最理想的平滑类型的一个很好的例子是http://www.webkit.org/blog-files/leaves/(是的,我确实阅读了它的来源.)

有什么输入?

Roo*_*777 5

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

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

  • 那篇帖子上的保罗爱尔兰视频说明了这一切. (2认同)

use*_*621 2

\n

根据 CSS3 规范的制定者的说法,translate:translate() 到底是做什么用的?

\n
\n\n

它说

\n\n
\n

为了向后兼容现有 SVG 内容,此规范支持 [ SVG11 ] 中的 \xe2\x80\x98transform\xe2\x80\x99 属性定义的所有变换函数。

\n
\n\n

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

\n\n

我认为最好针对您的特定情况运行一些性能测试。如果您的应用程序设计精良,这应该不难做到。此外,这样的设计可以允许针对每个设备进行优化,其中分别使用平移和偏移。

\n