Yot*_*mer 104
-webkit-transform: translate3d(0,0,0); 使一些设备运行其硬件加速.
在这里找到一个很好的阅读
本机应用程序可以访问设备的图形处理单元(GPU)以使像素飞行.另一方面,Web应用程序在浏览器的上下文中运行,这使得软件可以完成大部分(如果不是全部)渲染,从而减少了转换的马力.但是Web一直在追赶,大多数浏览器厂商现在通过特定的CSS规则提供图形硬件加速.
使用-webkit-transform: translate3d(0,0,0);将使GPU进入CSS过渡的动作,使它们更平滑(更高的FPS).
注意: translate3d(0,0,0)就你所看到的而言,什么都不做.它在x,y和z轴上移动对象0px.这只是一种强制硬件加速的技术.
另一种选择是-webkit-transform: translateZ(0).如果由于转换导致Chrome和Safari出现闪烁,请尝试-webkit-backface-visibility: hidden和-webkit-perspective: 1000.有关更多信息,请参阅此文章.
Mat*_*ian 11
我没有在这里看到解释这个问题的答案.通过div使用一组复杂的验证计算每个选项及其选项,可以完成大量转换.但是,如果使用3D功能,则您拥有的每个2D元素都被视为3D元素,我们可以动态地对这些元素执行矩阵变换.但是,大多数元素在技术上已经硬件加速,因为它们都使用GPU.但是,3D变换直接在这些2D渲染(或缓存版本div)的缓存版本上工作,并直接对它们使用矩阵变换(矢量化和并行化FP数学).
重要的是要注意,3D变换仅对缓存的2D div上的特征进行更改(换句话说,div已经是渲染图像).因此,改变边框宽度和颜色等内容不再是模糊地说"3D".如果您考虑一下,更改边框宽度需要您重新渲染,div并重新缓存它以便可以应用3D变换.
希望这是有道理的,如果您有任何疑问,请告诉我.
为了回答你的问题,translate3d: 0x 0y 0z因为变换直接在通过运行divGPU着色器的顶点形成的纹理上工作,所以什么都不做.此着色器资源现在被缓存,并且在绘制到帧缓冲区时将应用矩阵.所以,基本上没有这样做的好处.
这就是浏览器内部工作的方式.
第1步:解析输入
<div style = "position:absolute;left:0;right:0;bottom:0;top:0;"></div>
第2步:开发复合层
CompositeLayer compLayer = new CompositeLayer();
compLayer.setPosition(0, 0, 0, 0);
compLayer.setPositioning(ABSOLUTE); // Note. this is psuedocode. The actual code
Pipeline.add(compLayer, zIndex); // would be significantly more complex.
第3步:渲染复合层
for (CompositeLayer compLayer : allCompositeLayers){
// Create and set cacheTexture as active target
Texture2D cacheTexture = new Texture2D();
cacheTexture.setActive();
// Draw to cachedTexture
Pipeline.renderVertices(compLayer.getVertices());
Pipeline.setTexture(compLayer.getBackground());
Pipeline.drawIndexed(compLayer.getVertexCount());
// Set the framebuffer as active target
frameBuffer.setActive();
// Render to framebuffer from texture and **applying transformMatrix**
Pipeline.renderFromCache(cacheTexture, transformMatrix);
}
在MobileSafary(iOS 5)中滚动存在一个错误,导致在滚动容器中出现作为输入元素副本的工件.
对每个子元素使用translate3d可以修复那个奇怪的bug.这是一个CSS的例子,为我节省了一天.
.scrolling-container {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling-container .child-element {
position: relative;
-webkit-transform: translate3d(0,0,0);
}
Translate3D会强制硬件加速 .CSS动画，变换和过渡不会自动通过GPU加速，而是从浏览器的慢速软件渲染引擎执行。为了使用GPU，我们使用了translate3d
当前，Chrome，FireFox，Safari，IE9 +和最新版本的Opera之类的浏览器都具有硬件加速功能，只有在有迹象表明DOM元素会从中受益时才使用它。