[分享]css中3d鼠标悬停代码

CSS中的3D鼠标悬停代码可以让网页更加生动有趣，下面我们来看一下怎么实现。

.box {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

.box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  transform-origin: 50% 50% -100px;
  transition: transform 0.3s;
}

.box:hover img {
  transform: rotateX(90deg);
} 

首先，我们需要给一个容器加上透视（perspective）属性，这样才能在三维空间中展示元素。然后，给需要展示的元素设置绝对定位（position: absolute），并且将其transform-origin属性设置为旋转轴心。最后使用:hover伪类来定义悬停时的动画效果，这里我们使用rotateX函数来实现纵向旋转。

以上就是CSS中实现3D鼠标悬停的简单代码，更多三维效果可以通过控制rotateX、rotateY、scale等函数来实现。在实际应用中，我们也可以通过JavaScript来控制动画效果来实现更加复杂的交互效果。