CSS的transform屬性能夠?qū)崿F(xiàn)很多有趣的效果，我們今天來學習一下如何通過CSS實現(xiàn)點擊按鈕旋轉(zhuǎn)。
.button {
width: 100px;
height: 100px;
background-color: #FF5722;
color: white;
text-align: center;
line-height: 100px;
cursor: pointer;
transition: transform 0.5s;
}
.button:hover {
transform: rotate(180deg);
}首先我們需要創(chuàng)建一個按鈕，這里使用button類來表示，通過設置按鈕的寬度、高度、背景顏色、文本顏色以及鼠標樣式來創(chuàng)建一個漂亮的按鈕，并利用CSS的過渡效果實現(xiàn)動態(tài)變化。
然后我們通過:hover偽類選擇器來控制鼠標懸浮在按鈕上時的樣式，我們將按鈕旋轉(zhuǎn)180度。由于我們設置了過渡效果，所以按鈕不會立即旋轉(zhuǎn)，而是在0.5秒內(nèi)緩慢旋轉(zhuǎn)到目標狀態(tài)。
現(xiàn)在我們的CSS已經(jīng)寫好了，將代碼放入HTML文件中的style標簽中即可。
<!DOCTYPE html>
<html>
<head>
<style>
.button {
width: 100px;
height: 100px;
background-color: #FF5722;
color: white;
text-align: center;
line-height: 100px;
cursor: pointer;
transition: transform 0.5s;
}
.button:hover {
transform: rotate(180deg);
}
</style>
</head>
<body>
<button class="button">點擊旋轉(zhuǎn)</button>
</body>
</html>我們在HTML文件中創(chuàng)建了一個按鈕，并添加了button類，這個類定義了按鈕的樣式。現(xiàn)在打開這個HTML文件，驗證我們的CSS是否生效。
CSS的transform屬性能夠?qū)崿F(xiàn)更多有趣的效果，希望本篇文章能夠幫助你更好地學習CSS。謝謝！