cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <p>This pen is thought as an extension of Chris Coyier's article <a href="https://css-tricks.com/get-value-of-css-rotation-through-javascript/">Get Value of CSS Rotation through JavaScript</a>. I assumes you are using a modern browser that supports <a href="http://caniuse.com/#search=getComputedStyle">getComputedStyle</a> and <a href="http://caniuse.com/#search=transform">transform</a>.</p>
<p>You need to have the console open to see some output.</p>

  
<!-- random element with some transformations -->
<div id="transformed-thingy">I am magically transformed</div>

            
          
!
            
              #transformed-thingy {
  border: 1px red solid;
  width: 100px;
  height: 100px;
  -webkit-transform: translate(100px, 50px) rotate(45deg);
  transform: translate(100px, 50px) rotate(45deg);
}

            
          
!
            
              /**
 * Retrieves element transformation as a matrix
 *
 * Note that this will only take translate and rotate in account,
 * also it always reports px and deg, never % or turn!
 * 
 * @param elementId
 * @return string matrix
 */
var cssToMatrix = function(elementId) {
  var element = document.getElementById(elementId),
      style = window.getComputedStyle(element);

  return style.getPropertyValue("-webkit-transform") ||
         style.getPropertyValue("-moz-transform") ||
         style.getPropertyValue("-ms-transform") ||
         style.getPropertyValue("-o-transform") ||
         style.getPropertyValue("transform");
}

/**
 * Transforms matrix into an object
 * 
 * @param string matrix
 * @return object
 */
var matrixToTransformObj = function(matrix) {
  // this happens when there was no rotation yet in CSS
  if(matrix === 'none') {
    matrix = 'matrix(0,0,0,0,0)';
  }
  var obj = {},
      values = matrix.match(/([-+]?[\d\.]+)/g);

  obj.rotate = (Math.round(
    Math.atan2(
      parseFloat(values[1]), 
      parseFloat(values[0])) * (180/Math.PI)) || 0
  ).toString() + 'deg';
  obj.translate = values[5] ? values[4] + 'px, ' + values[5] + 'px' : (values[4] ? values[4] + 'px' : '');

  return obj;
}
  
var matrix = cssToMatrix('transformed-thingy');
var transformObj = matrixToTransformObj(matrix);
console.log(matrix, transformObj)
            
          
!
999px
Loading ..................

Console