javascript - 使用 JavaScript 触发 CSS3 动画

Question

您好，我正在尝试弄清楚如何使用 javascript 触发 css3 动画，由于某种原因，我的代码无法正常工作......`我的 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 元素：

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

Answer 1

您需要嵌套 div 才能使透视工作：

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

需要是：

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

另外，在 head 中运行你的 js 而不是 onload 让你的小提琴确认你的点击事件：

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