Trigger CSS3 анимации с JavaScript

Question

Здравствуйте я пытаюсь выяснить, как вызвать CSS3 анимации с JavaScript, по какой-то причине мой код разве рабочий ... `мой jfiddle можно увидеть здесь http://jsfiddle.net/sean3200/RE6K6/

CSS:

<style> 
#div1 
{ 
position: relative; 
height: 150px; 
width: 150px; 
margin: 50px; 
padding:10px; 
border: 1px solid black; 
perspective:150; 
-webkit-perspective:150; /* Safari and Chrome */ 
} 

#div2 
{ 
padding:50px; 
position: absolute; 
border: 1px solid black; 
background-color: red; 
transform: rotateX(45deg); 
-webkit-transform: rotateX(45deg); /* Safari and Chrome */ 
} 
</style> 

JavaScript:

<script type="text/javascript"> 
function myBtn() { 
    var btn = document.getElementById('div1').style.webkitPerspective=500; 

} 
</script> 

HTML Elements:

<button onclick="myBtn()">Move Me</button> 
<div id="div1">HELLO</div> 
<div id="div2">HELLO</div> 
<div id="div3">HELLO</div> 

Answer 1

Вы должны гнездиться свои дивы для перспективы работы:

<div id="div1">HELLO</div> 
<div id="div2">HELLO</div> 

должно быть:

<div id="div1"> 
    <div id="div2">HELLO</div> 
</div> 

Кроме того, запускать JS в голову не onload для вашей скрипки, чтобы подтвердить ваш клик:

http://jsfiddle.net/RE6K6/2/