[分享]css3怎么让跟着鼠标转

CSS3 提供了很多有趣的效果，其中包括让元素跟着鼠标转的效果。这个效果可以通过 transform 属性和鼠标事件来实现。.element { : absolute; /元素定位/ transfor...

CSS3 提供了很多有趣的效果，其中包括让元素跟着鼠标转的效果。这个效果可以通过 transform 属性和鼠标事件来实现。

.element {
  position: absolute; /*元素定位*/
  transform: translate(-50%, -50%); /*元素居中*/
} 

首先，在 CSS 中将需要跟着鼠标转的元素的定位属性设置为 absolute，然后通过 transform 属性让该元素剧中。

下面是代码块中的 JavaScript 代码，它处理当用户移动鼠标时会发生什么。

document.addEventListener('mousemove', (event) => { /*监听鼠标移动事件*/
  let xAxis = (window.innerWidth / 2 - event.pageX) / 20; /*计算鼠标移动距离*/
  let yAxis = (window.innerHeight / 2 - event.pageY) / 20;

  element.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; /*设置元素旋转角度*/

}); 

这段代码中，我们添加了一个鼠标移动事件监听器。当鼠标移动时，我们计算了鼠标离屏幕中心点的距离，并使用这些值来设置元素的旋转角度。

最后，我们只需要在 HTML 中添加需要跟着鼠标转的元素，和对应的 CSS 样式就可以了。

<div class="element">这是需要旋转的元素</div> 

现在，当用户移动鼠标时，该元素就会跟着鼠标转动。