i have a css3 class with transform

.temp{
    transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
}

then how can i get and change rotate frome .temp? only rotate,not transform. thanks.

i have a css3 class with transform

.temp{
    transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
}

then how can i get and change rotate frome .temp? only rotate,not transform. thanks.

• javascript
• html
• css
• svg

2 Answers 2

Since your transform styles are declared in CSS, you have to bring out the puted 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/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>

I don't think you can do that, you'll just have to replace the whole value. Maybe use string manipulation to modify it

var temp = document.getElementsByClassName('temp')[0]; //this is for the first one    
temp.style.transform = temp.style.transform.replace('rotate(45deg)', 'rotate(75deg)');

Edit: David is right, there is no tranform property in style. His solution is better, but you might find this useful.