CSS實(shí)現(xiàn)鼠標(biāo)放上去旋轉(zhuǎn)效果的方法

在CSS中，我們可以使用transform屬性來實(shí)現(xiàn)鼠標(biāo)放上去旋轉(zhuǎn)的效果，以下是一個(gè)簡單的示例：

1、我們需要?jiǎng)?chuàng)建一個(gè)HTML元素，例如一個(gè)div，作為旋轉(zhuǎn)的目標(biāo)：

<div id="rotate-target">鼠標(biāo)放上來試試</div>

2、我們使用CSS來設(shè)置這個(gè)元素的樣式，我們需要設(shè)置元素的寬度和高度，以便在旋轉(zhuǎn)時(shí)有一個(gè)清晰的目標(biāo)，我們可以使用transform屬性來設(shè)置旋轉(zhuǎn)的樣式，我們可以使用rotate()函數(shù)來實(shí)現(xiàn)旋轉(zhuǎn)效果：

#rotate-target {
  width: 200px;
  height: 200px;
  transform: rotate(0deg);
  transition: transform 0.5s ease-in-out;
}

3、我們使用JavaScript來監(jiān)聽鼠標(biāo)的懸停事件，當(dāng)鼠標(biāo)懸停在目標(biāo)上時(shí)，我們可以使用transform屬性來將目標(biāo)旋轉(zhuǎn)90度：

var target = document.getElementById('rotate-target');
target.addEventListener('mouseover', function() {
  target.style.transform = 'rotate(90deg)';
});
target.addEventListener('mouseout', function() {
  target.style.transform = 'rotate(0deg)';
});

在這個(gè)示例中，當(dāng)鼠標(biāo)懸停在目標(biāo)上時(shí)，目標(biāo)會旋轉(zhuǎn)90度，當(dāng)鼠標(biāo)離開目標(biāo)時(shí)，目標(biāo)會恢復(fù)原來的位置，你可以根據(jù)自己的需求來調(diào)整旋轉(zhuǎn)的角度和速度。