HTML 鼠标悬停箭头翻转效果代码示例

可以使用 CSS3 的 transform 属性来实现鼠标滑过时箭头翻转的效果，具体代码如下：

HTML 代码：

<div class='arrow'></div>

CSS 代码：

.arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #000;
  transition: transform 0.3s ease;
}

.arrow:hover {
  transform: rotateY(180deg);
}

解释：

1. 首先创建一个空的 div 元素，并给它一个类名为 'arrow'。

2. 在 CSS 中，我们为箭头设置了宽度和高度为 0，然后使用 border 来绘制三角形，其中顶部和底部使用透明的边框来隐藏，右侧使用黑色实线来绘制箭头。

3. 通过设置 transition 属性，我们让箭头在鼠标滑过时实现平滑的过渡效果。

4. 最后，通过 :hover 伪类选择器，我们设置箭头在鼠标滑过时旋转 180 度，实现翻转的效果。

注意事项：

1. transform 属性是 CSS3 的新特性，在一些老旧的浏览器中可能无法正常显示。

2. 本示例中使用的是 2D 旋转效果，如果需要实现 3D 效果，可以使用 rotateX 或 rotateZ 属性来实现。