当前位置：首页 > React

react实现图片旋转

2026-01-27 07:34:32React

实现图片旋转的方法

在React中实现图片旋转可以通过CSS变换或状态管理来控制旋转角度。以下是几种常见的方法：

使用CSS transform属性

通过动态修改CSS的transform属性实现旋转效果。可以结合React的useState来管理旋转角度。

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

function App() {
  const [rotation, setRotation] = useState(0);

  const rotateImage = () => {
    setRotation(rotation + 90);
  };

  return (
    <div>
      <img 
        src="your-image.jpg" 
        alt="Rotating" 
        style={{ transform: `rotate(${rotation}deg)` }}
      />
      <button onClick={rotateImage}>Rotate</button>
    </div>
  );
}

export default App;

使用CSS动画

通过CSS定义旋转动画，然后通过类名切换控制动画播放。

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotate {
  animation: spin 2s linear infinite;
}

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

function App() {
  const [isRotating, setIsRotating] = useState(false);

  return (
    <div>
      <img 
        src="your-image.jpg" 
        alt="Rotating" 
        className={isRotating ? 'rotate' : ''}
      />
      <button onClick={() => setIsRotating(!isRotating)}>
        {isRotating ? 'Stop' : 'Rotate'}
      </button>
    </div>
  );
}

export default App;

使用第三方动画库

React Spring等动画库可以提供更复杂的旋转效果。

react实现图片旋转

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

function App() {
  const [rotate, setRotate] = useState(false);

  const styles = useSpring({
    transform: rotate ? 'rotate(360deg)' : 'rotate(0deg)',
    config: { duration: 1000 }
  });

  return (
    <div>
      <animated.img 
        src="your-image.jpg" 
        alt="Rotating" 
        style={styles}
      />
      <button onClick={() => setRotate(!rotate)}>Toggle Rotation</button>
    </div>
  );
}

export default App;