Question

我有一个带变换的css3类

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

然后我怎么能得到并改变旋转frome .temp？只旋转，而不是变换。感谢。

Answer 1

由于您的转换样式是在CSS中声明的，因此您必须从元素中显示计算出的样式以进行修改：

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

这里的问题是你将获得矩阵（至少在chrome中），例如：

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

因此，除非您想修改矩阵参数，否则我建议您通过javascript而不是CSS来设置和修改样式：

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

现在你可以做一个字符串替换：

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

演示（使用chrome的webkit前缀）：http://jsfiddle.net/hZAvk/

Answer 2

我认为你不能这样做，你只需要替换整个价值。也许使用字符串操作来修改它

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

编辑：大卫是对的，style中没有转换属性。他的解决方案更好，但您可能会发现this很有用。

更改CSS3转换值？

2 个答案: