我想-webkit-transform: rotate()使用 JavaScript 动态更改属性，但常用的setAttribute不起作用：
img.setAttribute('-webkit-transform', 'rotate(60deg)');
在.style不工作要么...
如何在 JavaScript 中动态设置它？
如何使用 JavaScript 动态设置样式 -webkit-transform？
IT技术
javascript
webkit
2021-02-11 14:01:51
5个回答
JavaScript 样式名称是WebkitTransformOrigin和WebkitTransform
element.style.webkitTransform = "rotate(-2deg)";
在此处查看 WebKit 的 DOM 扩展参考。
以下是大多数常见供应商的 JavaScript 符号：
webkitProperty
MozProperty
msProperty
OProperty
property
我重置了内联转换样式，例如：
element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";
像这样使用 jQuery：
$(element).css({
"webkitTransform":"",
"MozTransform":"",
"msTransform":"",
"OTransform":"",
"transform":""
});
请参阅博客文章Coding Vendor Prefixes with JavaScript (2012-03-21)。
尝试使用
img.style.webkitTransform = "rotate(60deg)"
如果您想通过这样做，setAttribute您可以style像这样更改属性：
element.setAttribute('style','transform:rotate(90deg); -webkit-transform: rotate(90deg)') //etc
如果您想重置所有其他内联样式并且只再次设置您需要的样式属性的值，这将很有帮助，但在大多数情况下您可能不想要那样。这就是为什么每个人都建议使用这个的原因：
element.style.transform = 'rotate(90deg)';
element.style.webkitTransform = 'rotate(90deg)';
以上等价于
element.style['transform'] = 'rotate(90deg)';
element.style['-webkit-transform'] = 'rotate(90deg)';
要为您的 3D 对象设置动画，请使用以下代码：
<script>
$(document).ready(function(){
var x = 100;
var y = 0;
setInterval(function(){
x += 1;
y += 1;
var element = document.getElementById('cube');
element.style.webkitTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for safari and chrome
element.style.MozTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for firefox
},50);
//for other browsers use: "msTransform", "OTransform", "transform"
});
</script>
其它你可能感兴趣的问题