当前位置：首页 > JavaScript

实现图片旋转js

2026-01-16 12:53:14JavaScript

使用CSS transform属性旋转图片

通过CSS的transform属性可以轻松实现图片旋转。以下是一个简单的示例代码：

const image = document.getElementById('myImage');
image.style.transform = 'rotate(45deg)'; // 旋转45度

这种方法适用于静态旋转，角度值可以动态调整。

实现图片旋转js

使用Canvas旋转图片

Canvas提供了更灵活的旋转控制，适合需要精确操作的场景：

实现图片旋转js

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.translate(canvas.width / 2, canvas.height / 2); // 设置旋转中心
  ctx.rotate((Math.PI / 180) * 30); // 旋转30度（弧度制）
  ctx.drawImage(img, -img.width / 2, -img.height / 2);
  ctx.restore();
};

使用requestAnimationFrame实现动画旋转

通过requestAnimationFrame可以实现平滑的动画旋转效果：

let angle = 0;
function rotateImage() {
  const image = document.getElementById('myImage');
  angle = (angle + 1) % 360;
  image.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(rotateImage);
}
rotateImage();

使用第三方库（如Three.js）

对于复杂的3D旋转或交互需求，可以使用Three.js等库：

import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const texture = new THREE.TextureLoader().load('image.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();