-2

こんにちは、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>
4

1 に答える 1

0

パースペクティブを機能させるには、div をネストする必要があります。

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

する必要があります:

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

また、クリックイベントを確認するために、フィドルのオンロードではなくヘッドで js を実行します。

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

于 2013-01-26T01:37:36.220 に答える