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() 調用啟動轉換效果。