CSS的transform屬性能夠實現很多有趣的效果，我們今天來學習一下如何通過CSS實現點擊按鈕旋轉。
.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);
}首先我們需要創建一個按鈕，這里使用button類來表示，通過設置按鈕的寬度、高度、背景顏色、文本顏色以及鼠標樣式來創建一個漂亮的按鈕，并利用CSS的過渡效果實現動態變化。
然后我們通過:hover偽類選擇器來控制鼠標懸浮在按鈕上時的樣式，我們將按鈕旋轉180度。由于我們設置了過渡效果，所以按鈕不會立即旋轉，而是在0.5秒內緩慢旋轉到目標狀態。
現在我們的CSS已經寫好了，將代碼放入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">點擊旋轉</button>
</body>
</html>我們在HTML文件中創建了一個按鈕，并添加了button類，這個類定義了按鈕的樣式。現在打開這個HTML文件，驗證我們的CSS是否生效。
CSS的transform屬性能夠實現更多有趣的效果，希望本篇文章能夠幫助你更好地學習CSS。謝謝！
上一篇css點擊旋轉按鈕
下一篇div css布局具體