Javascript extractedWebkitTranslate3DProperty WebKitCSSMatrix

by on Jul.04, 2012, under CSS3, Safari-Specific, Software Development, WebKitCSSMatrix

For me, there are many times where I need to get at the x, y or z value of a -webkit-transform: translate3d({x}, {y}, {z}) property.

I had originally written the below method using .style.webkitTransform and then doing some fancy manipulations to extract out the x, y or z values from the style. However, you will find that elements will not have webkitTransform applied as a “style” to them when it is being set from a css class.

Therefore, I rewrote the method to use getComputedStyle and using its return value for ‘-webkit-transform’.

The interesting thing about this is that it returns a string representation of a WebKitCSSMatrix. Now I had to figure out how to get at the values of x, y and z from this structure.

With some trial and error, I found the following property correspondence:

.m41 – corresponds to the ‘x’ value of a WebKitCSSMatrix
.m42 – corresponds to the ‘y’ value of a WebKitCSSMatrix
.m43 – corresponds to the ‘z’ value of a WebKitCSSMatrix

Here is the main extractedWebkitTranslate3DProperty method, followed by its helper method getStyle:


    // extractedWebkitTranslate3DProperty([object|string] oHTMLElement, string property) //
    // ================================================================================= //
    // Extracts x,y,or z value from a webkitTranslate3D style. Returns a string value.    //
    function extractedWebkitTranslate3DProperty( oHTMLElement, property ) {
      var retVal = 0;
      if (typeof(oHTMLElement)=="string")  { oHTMLElement = document.getElementById(oHTMLElement); }
      if (property !== undefined) {
        var webkitTransform = getStyle(oHTMLElement,'-webkit-transform');
        if (webkitTransform && webkitTransform!=='none' && webkitTransform.indexOf('matrix') > -1) {
          switch (property.toLowerCase()) {
            case "x" :
              retVal = new WebKitCSSMatrix(webkitTransform).m41;
            case "y" :
              retVal = new WebKitCSSMatrix(webkitTransform).m42;
            case "z" :
              retVal = new WebKitCSSMatrix(webkitTransform).m43;
      return parseFloat(retVal);


    // getStyle([object|string] oHTMLElement, string cssProperty)                 //
    // ==========================================================                 //
    // Returns value of a cssProperty                                             //
    function getStyle(oHTMLElement, cssProperty) {
      if (typeof(oHTMLElement)=="string")  { oHTMLElement = document.getElementById(oHTMLElement); }
      var retVal = "";
      if(document.defaultView && document.defaultView.getComputedStyle){
        retVal = document.defaultView.getComputedStyle(oHTMLElement, null).getPropertyValue(cssProperty);
      } else {
        if (oHTMLElement.currentStyle){
          cssProperty = cssProperty.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
          retVal = oHTMLElement.currentStyle[cssProperty];
      return retVal;
Leave a Comment :, , , , more...

CSS3 Tooltip Trick using CSS3 :before psuedo element, content attribute and custom data attributes

by on Mar.03, 2011, under CSS3, Software Development

I was looking for a way to make an HTMLElement’s title appear faster in a WebKit application.

Turns out there is a way to capture the “title” attribute of an element using the :before pseudo element and content property, store that value in a div that only appears onhover over the original element. The problem with this technique was that the actual “title” attribute would eventually display.

Therefore, I made use of another CSS3 feature called “custom data attributes” and, rather than storing the title of the element in the “title” attribute, I used “data-title” instead.

Here is a quick example:

<!DOCTYPE html>
  <style type="text/css">
    .sprocket { position:relative;width:50px;height:50px;background-color:red; }
    .sprocket:before { content:attr(data-title); display:none; }
    .sprocket:hover::before{ width:160px; display:block; border-radius:3px; background-color:#fffdc7; padding:5px; color:black; margin-top:40px; margin-left:20px; -webkit-box-shadow: 3px 3px 3px rgba(193,193,193,.5);}
    .sprocket:hover{ z-index:10; position:absolute; }
  <div class="sprocket" data-title="Fancy Title Text">

Click here for an Example

Shannon Norrell

Leave a Comment :, , , more...

HTML5 Showcase

by on Jun.04, 2010, under CSS3, HTML5, Javascript, Software Development

The HTML5 demos we have been working on for Apple.com are now live!



Most of the demos use the DHTML slider we developed and all examples use our library.js code

HTML5 is here to stay!

Leave a Comment :, , , more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!


A few highly recommended websites...

  • A List Apart
  • Dive into HTML5
  • Javascript: The Good Parts
  • QuirksMode.org