translate3d的css3替代？ [英] css3 alternative for translate3d?

问题描述

我正在尝试转换一个JS脚本，为触摸启用设备，如ipads，使其可以用于鼠标手势。

脚本使用translate3d，我认为这是webkit具体的，但我想让这个工作在尽可能多的浏览器。

以下是在JavaScript中使用它的方法：

  element.style.webkitTransform ='translate3d（500px，0，0）'; 
  

我对CSS3的了解是非常有限的，所以任何例子/解释你可以给予非常感谢。

解决方案

Translate3d是CSS3，大多数浏览器都尚未实现（Chrome / Safari是唯一支持它的主要通过Webkit）。它是一个三维转换风格。

还有2-D转换切出Z轴，因此：

  translate3d（X，Y，Z）; //或translateX（X），translateY（Y），translateZ（Z）; 
  

成为

  translate（X，Y）;值得庆幸的是，2-D转换主要由所有主流浏览器（IE9及更高版本）支持，但它们需要浏览器前缀。在你的例子中，这将是：
  / * 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和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和Chrome 
  
有关2-D和3-D转换的更多信息， br /> 
  http://www.w3.org/TR/ css3-2d-transforms /  
 
  http ：//www.w3.org/TR/css3-3d-transforms/  
 
 
 
 2-D转换的一个缺点是，与3- D转换，它们不是GPU加速。请参阅此链接，了解有关多少硬件加速有助于过渡和动画的一些重要信息： http://ariya.blogspot.com/2011/07/fluid-animation-with-accelerated.html 。
 
 
 
浏览器的好处，你可以写一个函数来找到正确的浏览器转换样式来应用（或确定浏览器不支持转换），如下：
  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; 
}; 
  
您还可以使用 Modernizr 。
 
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. 

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?

Here's how it's being used in the 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. 
解决方案
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.

There are also 2-D transformations which cut out the Z-axis, so:
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:
/* 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/

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.

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.

                        
这篇关于translate3d的css3替代？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！