Javascript css3 替代translate3d？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8143953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css3 alternative for translate3d?
提问by imns
I'm trying to convert a JS script that was made for touch enabled devices like ipads so it can be used with the mouse gestures.
我正在尝试转换为 ipad 等支持触控的设备制作的 JS 脚本，以便它可以与鼠标手势一起使用。
The script uses translate3d, which (I think) is webkit specific, but I'd like to make this work in as many browsers as I can. So, what's the CSS3 alternative to translate3d?
该脚本使用了 translate3d，它（我认为）是特定于 webkit 的，但我希望在尽可能多的浏览器中使用它。那么，translate3d 的 CSS3 替代品是什么？
Here's how it's being used in the JavaScript:
以下是它在 JavaScript 中的使用方式：
element.style.webkitTransform = 'translate3d(500px, 0, 0)';
My knowledge of CSS3 is very limited, so any examples / explanations you can give are much appreciated.
我对 CSS3 的了解非常有限，因此非常感谢您提供的任何示例/解释。
回答by skyline3000
Translate3d is CSS3, most browsers just haven't implemented it yet (Chrome/Safari are the only major ones to support it via Webkit). It is a 3-D transformation style.
Translate3d 是 CSS3，大多数浏览器还没有实现它（Chrome/Safari 是唯一通过 Webkit 支持它的主要浏览器）。它是一种 3-D 变换样式。
There are also 2-D transformations which cut out the Z-axis, so:
还有切出 Z 轴的二维变换，因此：
translate3d(X,Y,Z); // or translateX(X), translateY(Y), translateZ(Z);
becomes
变成
translate(X,Y);
Thankfully, 2-D transforms are mostly supported by all major browsers (IE9 and up) but they require browser prefixes. In your example, this would look like:
值得庆幸的是，所有主流浏览器（IE9 及更高版本）大多都支持 2-D 转换，但它们需要浏览器前缀。在您的示例中，这看起来像：
/* CSS */
selector {
transform: translate(500px, 0);
-o-transform: translate(500px, 0); /* Opera */
-ms-transform: translate(500px, 0); /* IE 9 */
-moz-transform: translate(500px, 0); /* Firefox */
-webkit-transform: translate(500px, 0); /* Safari and Chrome */
}
/* JS */
element.style.transform = 'translate(500px, 0)';
element.style.OTransform = 'translate(500px, 0)'; // Opera
element.style.msTransform = 'translate(500px, 0)'; // IE 9
element.style.MozTransform = 'translate(500px, 0)'; // Firefox
element.style.WebkitTransform = 'translate(500px, 0)'; // Safari and Chrome
For a bit more on 2-D and 3-D transforms see:
http://www.w3.org/TR/css3-2d-transforms/
http://www.w3.org/TR/css3-3d-transforms/
有关 2-D 和 3-D 变换的更多信息，请参见：
http: //www.w3.org/TR/css3-2d-transforms/
http://www.w3.org/TR/css3-3d-transforms /
The one downside to 2-D transforms is that, unlike 3-D transforms, they are not GPU accelerated. See this link for some great info on how much hardware acceleration helps transitions and animations: http://ariya.blogspot.com/2011/07/fluid-animation-with-accelerated.html.
2-D 变换的一个缺点是，与 3-D 变换不同，它们不是 GPU 加速的。有关硬件加速对过渡和动画有多大帮助的一些重要信息，请参阅此链接：http: //ariya.blogspot.com/2011/07/fluid-animation-with-accelerated.html。
For more cross-browser goodness, you can write a function to find the correct browser transform style to apply (or determine the browser does not support transforms) like so:
为了获得更多跨浏览器的优点，您可以编写一个函数来查找要应用的正确浏览器转换样式（或确定浏览器不支持转换），如下所示：
var getTransformProperty = function(node) {
var properties = [
'transform',
'WebkitTransform',
'msTransform',
'MozTransform',
'OTransform'
];
var p;
while (p = properties.shift()) {
if (typeof node.style[p] != 'undefined') {
return p;
}
}
return false;
};
You can also use a feature-detection library like Modernizr.
您还可以使用像Modernizr这样的特征检测库。
回答by David Hu
2d transformsseem to be more widely supported, with vendor prefixes. Here's the W3C spec.
2d 转换似乎得到了更广泛的支持，带有供应商前缀。这是W3C 规范。
element.style.webkitTransform = 'translate(500px)';
You could use Modernizr to check for support.
您可以使用Modernizr 来检查支持。
