Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detecting 'transform: translate3d' support

Tags:

html

css

Does anyone know how I would detect transform: translate3d(x,y,z) support is available?

My issue is that I want to use translate3d across browsers where it is supported because it tends to use hardware acceleration and hence smoother for animation, and then fall back to translate where its not.

like image 312
Jamie Avatar asked Apr 14 '11 10:04

Jamie


2 Answers

Check out this solution.

It is based on the fact that if a browser supports transforms, the value of

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

will be a string containing the transformation matrix, when a 3d transform is applied to the element el. Otherwise, it will be undefined or the string 'none', as in the case of Opera 12.02.

It works on all major browsers.

The code:

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"); } 
like image 160
Lorenzo Polidori Avatar answered Oct 02 '22 09:10

Lorenzo Polidori


The original blog post announcing 3D transforms has an image flip demo, which does it with a media query, like this:

@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);   } } 

This blog post has a good intro to media queries. This has some more details.

like image 32
Jonathan Tran Avatar answered Oct 02 '22 07:10

Jonathan Tran