如何在React及React Native中实现文本3D悬停效果

要实现鼠标悬停时的类3D文本效果，核心是利用CSS的变换和阴影属性配合过渡动画，以下是两种实用实现方式：

方式一：纯CSS伪类实现（简单高效） #

无需React状态，直接通过CSS的:hover伪类触发效果，适合基础场景。

React组件代码 #

import React from 'react';
import './HoverText.css';

const HoverText = () => {
  return (
    <div className="hover-text-container">
      <h1 className="3d-hover-text">悬停查看3D效果</h1>
    </div>
  );
};

export default HoverText;

对应的CSS样式 #

.hover-text-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f5f5f5;
}

.3d-hover-text {
  font-size: 4rem;
  font-weight: 800;
  color: #2d2d2d;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.3d-hover-text:hover {
  /* 向上位移+轻微X轴旋转，模拟3D抬起效果 */
  transform: translateY(-6px) rotateX(12deg);
  /* 多层阴影营造立体厚度 */
  text-shadow: 
    0 1px 0 #ddd,
    0 2px 0 #d9d9d9,
    0 3px 0 #ccc,
    0 4px 0 #c9c9c9,
    0 5px 0 #bbb,
    0 6px 1px rgba(0,0,0,0.1),
    0 0 5px rgba(0,0,0,0.1),
    0 1px 3px rgba(0,0,0,0.3),
    0 3px 5px rgba(0,0,0,0.2),
    0 5px 10px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.2),
    0 20px 20px rgba(0,0,0,0.15);
}

方式二：React状态控制（适合复杂交互） #

如果需要结合其他交互逻辑（比如点击保持效果），可以用React状态来控制激活类：

React组件代码 #

import React, { useState } from 'react';
import './HoverText.css';

const HoverText = () => {
  const [isActive, setIsActive] = useState(false);

  return (
    <div className="hover-text-container">
      <h1 
        className={`3d-hover-text ${isActive ? 'active' : ''}`}
        onMouseEnter={() => setIsActive(true)}
        onMouseLeave={() => setIsActive(false)}
      >
        悬停查看3D效果
      </h1>
    </div>
  );
};

export default HoverText;

修改后的CSS样式 #

把原有的:hover替换为.active类即可：

.3d-hover-text.active {
  transform: translateY(-6px) rotateX(12deg);
  text-shadow: 
    0 1px 0 #ddd,
    0 2px 0 #d9d9d9,
    0 3px 0 #ccc,
    0 4px 0 #c9c9c9,
    0 5px 0 #bbb,
    0 6px 1px rgba(0,0,0,0.1),
    0 0 5px rgba(0,0,0,0.1),
    0 1px 3px rgba(0,0,0,0.3),
    0 3px 5px rgba(0,0,0,0.2),
    0 5px 10px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.2),
    0 20px 20px rgba(0,0,0,0.15);
}

自定义调整建议 #

• 调整transform的translateY和rotateX值，可改变3D抬起的幅度和角度
• 修改text-shadow的层数、颜色和偏移量，能调整立体效果的厚重感
• 更换transition的缓动函数（比如cubic-bezier），可以让动画更贴合需求

内容的提问来源于stack exchange，提问作者Shahroz Atiq