<div 角度翻轉(zhuǎn)是一種常見的 CSS 動(dòng)畫效果，它可以使一個(gè)元素在指定的時(shí)間內(nèi)沿著旋轉(zhuǎn)軸進(jìn)行旋轉(zhuǎn)。通過改變?cè)氐?transform 屬性中的 rotate 角度值實(shí)現(xiàn)。本文將通過幾個(gè)簡(jiǎn)單的代碼案例詳細(xì)解釋和演示 div 角度翻轉(zhuǎn)效果。

案例1：

<div style="width: 100px; height: 100px; background-color: #f00; transform: rotate(45deg);"></div>

以上代碼中，我們創(chuàng)建了一個(gè)紅色的正方形 div 元素，并通過 transform 屬性的 rotate 方法，將其角度翻轉(zhuǎn)了 45 度。可以通過通過修改 rotate() 中的角度值，實(shí)現(xiàn)不同角度的翻轉(zhuǎn)效果。

案例2：

<div style="width: 100px; height: 100px; background-color: #0f0; transform: rotateX(45deg);"></div>

上面的案例中，我們使用了 rotateX() 方法，該方法可以使一個(gè)元素沿 X 軸進(jìn)行旋轉(zhuǎn)。通過修改 rotateX() 中的角度值，我們可以獲得不同的翻轉(zhuǎn)效果。

案例3：

<div style="width: 100px; height: 100px; background-color: #00f; transform: rotateY(45deg);"></div>

和案例2類似，上述代碼中使用了 rotateY() 方法，可以使一個(gè)元素沿 Y 軸進(jìn)行旋轉(zhuǎn)。同樣地，通過修改 rotateY() 中的角度值，我們可以實(shí)現(xiàn)不同的翻轉(zhuǎn)效果。

案例4：

<div style="width: 100px; height: 100px; background-color: #ff0; transform: rotateZ(45deg);"></div>

在案例4中，我們使用了 rotateZ() 方法，該方法可以使一個(gè)元素沿 Z 軸進(jìn)行旋轉(zhuǎn)。同樣地，通過修改 rotateZ() 中的角度值，可以實(shí)現(xiàn)不同的翻轉(zhuǎn)效果。

通過上述案例，我們可以看到通過改變 rotate()、rotateX()、rotateY()、rotateZ() 中的角度值，可以實(shí)現(xiàn)不同旋轉(zhuǎn)軸上的 div 角度翻轉(zhuǎn)效果。這是一個(gè)非常強(qiáng)大的動(dòng)畫效果，可以為網(wǎng)頁(yè)增添更多的交互和視覺效果。

</div>