css3 альтернатива для translate3d?

Question

Я пытаюсь преобразовать JS-скрипт, созданный для сенсорных устройств, таких как ipads, чтобы его можно было использовать с жестами мыши.

Скрипт использует translate3d, который (я думаю) специфичен для webkit, но я бы хотел, чтобы это работало в максимально возможном количестве браузеров.Итак, что такое CSS3 альтернатива translate3d?

Вот как это используется в JavaScript:

element.style.webkitTransform = 'translate3d(500px, 0, 0)';

Мои знания CSS3 очень ограничены, поэтому любые примеры / объяснения, которые вы можете дать,очень признателен.

Answer 1

Translate3d - это CSS3, большинство браузеров просто еще не реализовали его (Chrome / Safari - единственные, кто поддерживает его через Webkit). Это трехмерный стиль трансформации.

Существуют также двумерные преобразования, которые вырезают ось Z, поэтому:

translate3d(X,Y,Z); // or 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 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

Подробнее о двухмерных и трехмерных преобразованиях см .:
http://www.w3.org/TR/css3-2d-transforms/
http://www.w3.org/TR/css3-3d-transforms/

Единственный недостаток двумерных преобразований заключается в том, что, в отличие от трехмерных преобразований, они не ускоряются графическим процессором. Посмотрите эту ссылку для получения отличной информации о том, насколько аппаратное ускорение помогает при переходах и анимации: 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 .

Answer 2

2d преобразования кажутся более широко поддерживаемыми с префиксами производителя. Вот спецификация W3C .

element.style.webkitTransform = 'translate(500px)';

Вы можете использовать Modernizr для проверки поддержки .