Javascript使用CSS来旋转元素

Question

我有以下代码

function rotateRabbitHead(rabbit_head){
    var bunny = document.getElementById(rabbit_head);
    bunny.style.transition = "left 1s ease-in 0s";
    bunny.style.left = "0px";
    bunny.transform = "rotateX(10deg)";
}

我触发了onclick功能并看到兔子头部进入视野，但是我无法让头部旋转或在转换上花些时间。

我哪里错了？

Answer 1

bunny.style.transform = "rotateX(10deg)";

您忘记了.style：）

如果可以，请考虑将其添加到多个浏览器支持

// Code for Chrome, Safari, Opera
bunny.style.WebkitTransform = "rotate(10deg)"; 
// Code for IE9
bunny.style.msTransform = "rotate(10deg)"; 
// Standard syntax
bunny.style.transform = "rotate(10deg)";