我在懸停時將六邊形（6 邊形）圖示旋轉 60 度，并希望它保持旋轉狀態，只要您不再將其懸停。如果您再次將滑鼠懸停在該圖示上，它會再旋轉 60 度。
純 CSS 可以實作這種效果嗎？重要的是，只要您不再懸停圖示，圖示就會一直旋轉，如果您懸停它，它會再旋轉 60 度。
我已經嘗試過使用過渡和變換的常用方法，但是當您將其懸停時，圖示會恢復到原來的旋轉狀態。
.icon:hover {
transition: transform 0.5s;
transform: rotate(60deg);
}
uj5u.com熱心網友回復：
使用 JS，每次將滑鼠懸停在正方形上時，您都會將正方形旋轉 10 度：
let div = document.querySelector(".a");
let i = 10; //degrees to rotate
const rotateIt = () => {
div.style.transform="rotate(" i "deg)";
i = i 10;
}
div.addEventListener("mouseover", rotateIt);div.a {
width: 100px;
height: 100px;
background-color: red;
}
div.a:hover {
transform: rotate(20deg);
}<div class="a"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/535498.html
標籤：CSS动画回转徘徊
上一篇：如何從這個基礎創建擴展線影片？