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.
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>
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.