CSS3 旋轉三角形

CSS 透過 border 樣式設定可以描繪三角形,再經由 transform 屬性的設定即可旋轉所建立的三角型效果如下:


首先配置一個 div 元素命名為triangle ,並且設定樣式如下:

<style>
        #triangle {
            width: 0;
            height: 0;          
            border-right:100px solid transparent ;
            border-left:100px solid transparent;
            border-bottom: 100px solid blue;
            transition: all 100ms ;          
        }    
    </style>

其中的 border-right、 border-left 與 border-bottom 組合出所需的三角形,transition 轉場設定讓旋轉的效果比較流暢。撰寫以下的程式碼設定 Transform 樣式以進行旋轉:

    <script> 
        var angle = 0; 
        function rotate() {
            document.getElementById('triangle').style.WebkitTransform = 
                'rotate(' + angle + 'deg)';
            document.getElementById('triangle').style.MozTransform =
                'rotate(' + angle + 'deg)';
            document.getElementById('triangle').style.msTransform =
                 'rotate(' + angle + 'deg)';
            angle += 2;
        } 
        setInterval(rotate, 100); 
    </script>

為了相容 IE、FF與Chrome ,因此分別指定字首重複設定三次,最後經由 setInterval() 調用啟動轉換效果。






沒有留言: