更改 CSS3 转换值？

Question

我有一个带变换的 css3 类

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

那么我怎样才能从 .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/

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>

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 很有用。