当前位置：首页 > JavaScript

js实现图片翻转

2026-01-30 14:51:25JavaScript

使用CSS transform实现图片翻转

通过CSS的transform属性结合JavaScript动态添加类名或样式，实现图片水平或垂直翻转效果。

水平翻转
添加CSS样式定义翻转效果：

.flip-horizontal {
  transform: scaleX(-1);
}

垂直翻转

.flip-vertical {
  transform: scaleY(-1);
}

JavaScript动态切换类名：

const img = document.getElementById('myImage');
img.classList.toggle('flip-horizontal'); // 水平翻转切换

使用Canvas实现高级翻转

通过Canvas的drawImage方法配合变换矩阵实现更灵活的翻转控制。

水平翻转绘制

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = function() {
  ctx.translate(canvas.width, 0);
  ctx.scale(-1, 1);
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = 'image.jpg';

垂直翻转绘制

ctx.translate(0, canvas.height);
ctx.scale(1, -1);

使用WebGL实现3D翻转

通过Three.js等库实现3D空间内的图片翻转动画：

const texture = new THREE.TextureLoader().load('image.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
const geometry = new THREE.PlaneGeometry(1, 1);
const mesh = new THREE.Mesh(geometry, material);

// X轴旋转180度实现垂直翻转
mesh.rotation.x = Math.PI; 
// Y轴旋转180度实现水平翻转
mesh.rotation.y = Math.PI;

实现动画过渡效果

结合CSS transition实现平滑翻转动画：

.flip-animation {
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

JavaScript控制动画：

let isFlipped = false;
function toggleFlip() {
  const img = document.getElementById('myImage');
  isFlipped = !isFlipped;
  img.style.transform = isFlipped ? 'rotateY(180deg)' : 'rotateY(0)';
}