更改CSS3转换值

Change CSS3 Transform Value?

本文关键字：转换 CSS3 更改      更新时间：2024-03-13

我有一个带有转换的css3类

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

那么我怎样才能从温度中得到和改变旋转呢？只旋转，不变换。谢谢

由于您的转换样式是在CSS中声明的，因此您必须从元素中取出计算的样式来修改它：

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

这里的问题是，你会得到矩阵（至少是铬），类似于：

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

Demo（使用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>

我认为你做不到，你只需要替换整个值。也许可以使用字符串操作来修改

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中没有transform属性。他的解决方案更好，但你可能会发现这很有用。

相关文章：