動態設定 CSS3 動畫樣式

CSS3 支援了 translate 與　transform　之類的動態效果樣式，只要完成相關屬性的設定，並經由 JavaScript 動態設定，即可輕易的完成互動效果。考慮以下的範例，於其中黑色區塊按一下，此區塊會左右移動（IE瀏覽器不支援，請改用 Chrome 或是 Firfox）。

HTML5 CSS3

於畫面配置以下的內容，第二個 <div> 標籤背景設為 black 以方便測試，請特別注意其中設定了 transform 與 transition 樣式：

<div style="…">

        <div id="page" onclick="changeTStyle()" style="background: black;

                                color:white ;

                                width:230px;height:360px;

                                z-index: 100;

                                position: absolute;

                                padding:70px 0 0 70px;font-size:18pt;

                                -webkit-transform: translate(300px,0px);       

                                -webkit-transition: -webkit-transform 500ms">

          HTML5 CSS3

        </div>       

</div>

接下來撰寫以下的 JavaScript，其中調整 page 的 transform 樣式來達到切換的效果。

var s = true;

function changeTStyle() {

    if(s)

        document.getElementById('page').style.webkitTransform =

            'translate(0px,0px)';

    else

        document.getElementById('page').style.webkitTransform =

            'translate(300px,0px)'; 

    s = !s;

}

若是要同時支援 Firefox ，則分別設定 -moz-transform 、-moz-transition樣式即可。