Question

Hello i’m trying to figure out how to trigger a css3 animation with javascript, for some reason my code isnt working…` my jfiddle can be seen here 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

You need to nest your divs for perspective to work:

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

Needs to be:

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

Also, run your js in the head not onload for your fiddle to acknowledge your click event:

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