CSS三角形旋轉是一種簡單而有趣的樣式效果，可以用來裝飾網頁中的各種元素。下面我們將通過簡單的代碼示例來演示如何使用CSS實現三角形旋轉效果。

.triangle {
content: "";
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #000;
transform: rotate(45deg);
margin: 50px;
}

如上所示，我們先創建一個空的div，并設置其寬高為0。接著使用border屬性來定義三角形的形狀，其中border-left和border-right定義了三角形的左右兩側，border-bottom則定義了三角形的底部。在三角形樣式定義完畢之后，我們使用transform屬性來旋轉三角形，使之與正方形的邊緣呈現45度夾角的效果。

如果我們想讓三角形向上旋轉，則只需要將45度改為-45度即可：

.triangle {
content: "";
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #000;
transform: rotate(-45deg);
margin: 50px;
}

除了使用transform屬性來旋轉三角形以外，我們還可以使用transition屬性來制定一定的過渡效果，使得三角形能夠平滑地旋轉。代碼如下：

.triangle {
content: "";
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #000;
transition: transform .5s;
margin: 50px;
}
.triangle:hover {
transform: rotate(45deg);
}

上述代碼中，我們在.triangle定義中使用了transition屬性來設置過渡效果，該效果將在.5秒（即500毫秒）內完成。在:hover狀態下，我們將三角形旋轉45度，從而實現三角形平滑旋轉的效果。