Detectando el soporte ‘transform: translate3d’

¿Alguien sabe cómo detectaría la transform: translate3d(x,y,z) soporte de transform: translate3d(x,y,z) está disponible?

Mi problema es que quiero usar translate3d todos los navegadores donde sea compatible, ya que tiende a usar la aceleración de hardware y, por lo tanto, es más suave para la animación, y luego recurre a donde no.

Mira esta solución .

Se basa en el hecho de que si un navegador admite transformaciones, el valor de

 window.getComputedStyle(el).getPropertyValue('transform') 

será una cadena que contiene la matriz de transformación, cuando se aplica una transformación 3D al elemento el . De lo contrario, no estará undefined o la cadena 'none' , como en el caso de Opera 12.02.

Funciona en todos los principales navegadores.

El código:

 function has3d() { if (!window.getComputedStyle) { return false; } var el = document.createElement('p'), has3d, transforms = { 'webkitTransform':'-webkit-transform', 'OTransform':'-o-transform', 'msTransform':'-ms-transform', 'MozTransform':'-moz-transform', 'transform':'transform' }; // Add it to the body to get the computed style. document.body.insertBefore(el, null); for (var t in transforms) { if (el.style[t] !== undefined) { el.style[t] = "translate3d(1px,1px,1px)"; has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]); } } document.body.removeChild(el); return (has3d !== undefined && has3d.length > 0 && has3d !== "none"); } 

La publicación de blog original que anuncia transformaciones 3D tiene una demo de imagen invertida , que lo hace con una consulta de medios, como esta:

 @media all and (-webkit-transform-3d) { /* Use the media query to determine if 3D transforms are supported */ #flip-container { -webkit-perspective: 1000; } #flip-card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: -webkit-transform 1s; } #flip-container:hover #flip-card { -webkit-transform: rotateY(180deg); } } 

Esta publicación de blog tiene una buena introducción a las consultas de los medios. Esto tiene más detalles.

Puedes probar CCS3 @supports:

 @supports (transform: translate3d) { div { transform : translate3d(20px,0,0); } } @supports not (transform: translate3d) { div { transform: translate(20px,0); } } 

Puedo usar @support

Sugeriría usar Modernizr .

Cuenta con detección para una amplia gama de características del navegador, incluidas las transformaciones 3D. También proporciona un método para especificar reglas de CSS para navegadores que tienen varias funciones o no, por lo que parece que hará exactamente lo que estás buscando.

Espero que ayude.

 //The following is based on iScroll4's tests to determine if a browser supports CSS3 3D transforms. var has3d = function() { return ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()); } 

Estaba jugando con una forma de verificar el soporte en 3D … usé esta implementación de Jeffery Way en este artículo . Permite menos código y más casos de uso;)

 /** * Test For CSS3 property support * use 'perspective' to test for 3d support */ var supports = (function() { 'use strict'; var div = document.createElement('div'), vendors = 'Khtml ms O Moz Webkit'.split(' '), len = vendors.length; return function(prop) { if (prop in div.style) return true; prop = prop.replace(/^[az]/, function(val) { return val.toUpperCase(); }); while(len--) { if (vendors[len] + prop in div.style) { return true; } } return false; }; })(); if(supports('perspective')) { // do 3d stuff } 

Este código se ajusta para probar la compatibilidad con 3D Transforms y otras características de CSS3.

La ventaja de este código es que detecta el prefijo del proveedor compatible (si lo hay). Llámalo:

 testCSSSupport('transform') 

Posibles valores de retorno:

false , cuando la función no es compatible, o

 { vendor: 'moz', cssStyle: '-moz-transform', jsStyle: 'MozTransform' } 

cuando la característica es compatible

 /** * Test for CSS3 feature support. Single-word properties only by now. * This function is not generic, but it works well for transition and transform at least */ testCSSSupport: function (feature, cssTestValue/* optional */) { var testDiv, featureCapital = feature.charAt(0).toUpperCase() + feature.substr(1), vendors = ['', 'webkit', 'moz', 'ms'], jsPrefixes = ['', 'Webkit', 'Moz', 'ms'], defaultTestValues = { transform: 'translateZ(0.5em) rotateY(10deg) scale(2)' // This will test for 3D transform support // Use translateX to test 2D transform }, testFunctions = { transform: function (jsProperty, computed) { return computed[jsProperty].substr(0, 9) === 'matrix3d('; } }; function isStyleSupported(feature, jsPrefixedProperty) { if (jsPrefixedProperty in testDiv.style) { var testVal = cssTestValue || defaultTestValues[feature], testFn = testFunctions[feature]; if (!testVal) { return false; } //Assume browser without getComputedStyle is either IE8 or something even more poor if (!window.getComputedStyle) { return false; } testDiv.style[jsPrefixedProperty] = testVal; var computed = window.getComputedStyle(testDiv); if (testFn) { return testFn(jsPrefixedProperty, computed); } else { return computed[jsPrefixedProperty] === testVal; } } } //Create a div for tests and remove it afterwards if (!testDiv) { testDiv = document.createElement('div'); document.body.appendChild(testDiv); setTimeout(function () { document.body.removeChild(testDiv); testDiv = null; }, 0); } var cssPrefixedProperty, jsPrefixedProperty; for (var i = 0; i < vendors.length; i++) { if (i === 0) { cssPrefixedProperty = feature; //todo: this code now works for single-word features only! jsPrefixedProperty = feature; //therefore box-sizing -> boxSizing won't work here } else { cssPrefixedProperty = '-' + vendors[i] + '-' + feature; jsPrefixedProperty = jsPrefixes[i] + featureCapital; } if (isStyleSupported(feature, jsPrefixedProperty)) { return { vendor: vendors[i], cssStyle: cssPrefixedProperty, jsStyle: jsPrefixedProperty }; } } return false; } 

Bootstrap usa el siguiente código:

 @media all and (transform-3d), (-webkit-transform-3d) { .carousel-inner > .carousel-item { transition: transform 0.6s ease-in-out; backface-visibility: hidden; perspective: 1000px; } .carousel-inner > .carousel-item.next, .carousel-inner > .carousel-item.active.right { left: 0; transform: translate3d(100%, 0, 0); } .carousel-inner > .carousel-item.prev, .carousel-inner > .carousel-item.active.left { left: 0; transform: translate3d(-100%, 0, 0); } .carousel-inner > .carousel-item.next.left, .carousel-inner > .carousel-item.prev.right, .carousel-inner > .carousel-item.active { left: 0; transform: translate3d(0, 0, 0); } } 

tl: dr: utilice el rastreo de agente de usuario. Aquí hay una secuencia de comandos para detectar el soporte de la transformación CSS 3D en todos los navegadores: https://github.com/zamiang/detect-css3-3D-transform

Probé la mayoría de los métodos en esta publicación, entre otros, los métodos de Modernizer y Meny , pero no pude admitir navegadores como Firefox, manteniendo una buena experiencia para navegadores más antiguos como Safari 4 y 5, dispositivos iOS y Chrome en Retina MacBook (todos tienen sus peculiaridades).

Las transformaciones CSS3 3D implican la interacción entre el navegador y la tarjeta gráfica. El navegador puede analizar las declaraciones tridimensionales, pero es posible que no pueda instruir correctamente a la tarjeta gráfica sobre cómo renderizar su página. Hay muchos resultados posibles que van desde la representación de la página con líneas que lo cruzan (Safari 4) hasta la representación de la página de forma hermosa y luego se cuelga el navegador unos segundos más tarde (Safari en iOS4). Cualquier enfoque de “detección de características” marcaría de forma inaceptable estos como ‘soporta transformaciones 3D de CSS3’. Este es un caso en el que falla la “detección de características” y el rastreo de agente de usuario (y muchas pruebas) gana sin problemas.

La mayoría de las funciones de detección asumen un soporte ‘binario’ o ‘no compatible’. Este no es el caso con las Transformaciones 3D CSS3: hay un ‘gradiente de soporte’.

El soporte de transformación 3D CSS3 se puede separar en 4 niveles:

  1. Es confiablemente compatible con transformaciones 3D en la mayoría de las máquinas. Por ejemplo: Safari 6
  2. Puede analizar y aplicar declaraciones de transformación 3D pero ignora las partes 3D. Por ejemplo: Chrome en una Retina MacBook Pro.
  3. Puede analizar y aplicar declaraciones de transformación 3D, pero representa de forma inaceptable. Por ejemplo: Safari 4 y Safari 4/5 en Windows muestran líneas en toda la página.
  4. No se pueden aplicar declaraciones de transformación 3D de ninguna manera. Por ejemplo: IE o Firefox

Esta secuencia de comandos devolverá true en el escenario uno y dos, pero false para 3 y 4:

Nota: nuevo para participar en stackoverflow: avíseme si debo pegar ese código en línea (es un poco largo)

Usando jQuery:

 var cssTranslate3dSupported = false; (function() { var div = $('
Translate3d Test
'); $('body').append(div); div.css( { 'transform' : "translate3d(20px,0,0)", '-moz-transform' : "translate3d(20px,0,0)", '-webkit-transform' : "translate3d(20px,0,0)", '-o-transform' : "translate3d(20px,0,0)", '-ms-transform' : "translate3d(20px,0,0)" }); cssTranslate3dSupported = (div.offset().left == 20); div.empty().remove(); })();

El autor de Hardware Accelerated Accordion comprueba de esta manera:

 var has3d = ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()) 

simplemente usa:

 alert($.support.cssTransform3d); 

esto alerta verdadero si es compatible y falso si no