当前位置：首页 > React

react实现翻转动画

2026-01-27 13:41:10React

使用 CSS 和 React 实现翻转动画

翻转动画可以通过 CSS 的 transform 属性结合 React 的状态管理实现。以下是一个完整的实现方案：

1. 定义组件结构和样式

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

const FlipCard = () => {
  const [isFlipped, setIsFlipped] = useState(false);

  return (
    <div className="flip-card-container">
      <div className={`flip-card ${isFlipped ? 'flipped' : ''}`}>
        <div className="flip-card-front">
          <h3>Front Content</h3>
          <button onClick={() => setIsFlipped(!isFlipped)}>Flip</button>
        </div>
        <div className="flip-card-back">
          <h3>Back Content</h3>
          <button onClick={() => setIsFlipped(!isFlipped)}>Flip Back</button>
        </div>
      </div>
    </div>
  );
};

export default FlipCard;

2. 添加 CSS 动画效果

.flip-card-container {
  perspective: 1000px;
  width: 300px;
  height: 200px;
}

.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card.flipped {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.flip-card-back {
  transform: rotateY(180deg);
  background-color: #f5f5f5;
}

使用 React Spring 实现更流畅的动画

对于更复杂的动画效果，可以使用 react-spring 库：

import { useSpring, animated } from 'react-spring';

const FlipCardSpring = () => {
  const [flipped, setFlipped] = useState(false);

  const { transform, opacity } = useSpring({
    opacity: flipped ? 1 : 0,
    transform: `perspective(600px) rotateY(${flipped ? 180 : 0}deg)`,
    config: { mass: 5, tension: 500, friction: 80 }
  });

  return (
    <div onClick={() => setFlipped(!flipped)}>
      <animated.div
        style={{
          opacity: opacity.interpolate(o => 1 - o),
          transform
        }}
      >
        Front Content
      </animated.div>
      <animated.div
        style={{
          opacity,
          transform: transform.interpolate(t => `${t} rotateY(180deg)`)
        }}
      >
        Back Content
      </animated.div>
    </div>
  );
};

实现 3D 翻转卡片效果

要创建更真实的 3D 效果，可以调整 CSS 的 perspective 和 transform-origin：

.flip-card-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
  transform-origin: center center;
}

.flip-card-3d .front,
.flip-card-3d .back {
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.flip-card-3d .back {
  transform: rotateY(180deg);
}

.flip-card-3d.flipped .front {
  transform: rotateY(-180deg);
}

.flip-card-3d.flipped .back {
  transform: rotateY(0deg);
}