Change CSS3 Transform Value?

css, html, javascript, svg

Solution

Since your transform styles are declared in CSS, you have to bring out the computed style from the element to modify it:

var temp = document.querySelector('.temp')
var styles = window.getComputedStyle(temp, null).getPropertyValue('transform');

The problem here is that you will get the matrix (in chrome at least), something like:

matrix(1.0555833735058735, 0.07578747639260253, 0.13126775968941418, 1.828324034537128, 0, 0)

So unless you want to modify the matrix parameters, I suggest you set and modify the styles via javascript instead of CSS:

var transform = 'rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg)';
temp.style.transform = transform;

Now you can do a string replace:

temp.style.transform = transform.replace(/45deg/,'90deg');

Demo (using webkit prefix for chrome): http://jsfiddle.net/hZAvk/

var temp = document.querySelector('div')
var transform = 'rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg)';

temp.style.WebkitTransform = transform;

setTimeout(function() {
    temp.style.WebkitTransform = transform.replace(/45deg/,'90deg');
},1000);

.temp{
    height:100px;background:red;
}

<div class="temp"></div>

Problem

Original source