更改CSS3变换值？

Question

我有一个带有transform的CSS3类。

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

那么我怎样才能从 .temp 中获取并更改旋转角度呢？只需要更改旋转角度，不需要改变 transform。 谢谢。

- ywq

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>

- David Hellsing

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)');

编辑：David是正确的，在style中没有tranform属性。他的解决方案更好，但您可能会发现this有用。

- tewathia

---

样式声明中没有 transform 属性，您需要获取计算后的样式。 - David Hellsing

你说得对。确实没有。我正在尝试使用 $('.temp').css('transform')，但返回的计算值不容易理解。 - tewathia