当前位置：首页 > JavaScript

js实现图片翻转

2026-03-01 05:55:16JavaScript

使用 CSS transform 实现图片翻转

通过 CSS 的 transform 属性配合 JavaScript 可以实现图片翻转效果。以下是基本实现方法：

const image = document.getElementById('flipImage');
image.style.transform = 'scaleX(-1)'; // 水平翻转
image.style.transform = 'scaleY(-1)'; // 垂直翻转
image.style.transform = 'scale(-1, -1)'; // 同时水平和垂直翻转

使用 CSS class 切换实现翻转动画

为图片添加 CSS 动画效果，通过 JavaScript 切换 class 实现平滑翻转：

js实现图片翻转

.flip-horizontal {
  transform: scaleX(-1);
  transition: transform 0.5s ease;
}
.flip-vertical {
  transform: scaleY(-1);
  transition: transform 0.5s ease;
}

document.getElementById('flipBtn').addEventListener('click', function() {
  document.getElementById('flipImage').classList.toggle('flip-horizontal');
});

3D 翻转效果实现

使用 CSS 3D transform 创建更逼真的翻转效果：

js实现图片翻转

.flip-container {
  perspective: 1000px;
}
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.flipper.flipped {
  transform: rotateY(180deg);
}
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.back {
  transform: rotateY(180deg);
}

document.getElementById('flipBtn').addEventListener('click', function() {
  document.querySelector('.flipper').classList.toggle('flipped');
});

Canvas 实现图片翻转

使用 Canvas API 可以更灵活地控制图片翻转：

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

img.onload = function() {
  // 水平翻转
  ctx.scale(-1, 1);
  ctx.drawImage(img, -img.width, 0);

  // 垂直翻转
  ctx.scale(1, -1);
  ctx.drawImage(img, 0, -img.height);
};

img.src = 'image.jpg';

使用 WebGL 实现高级翻转效果

对于需要高性能或复杂效果的场景，可以使用 WebGL：

const gl = canvas.getContext('webgl');
// 设置顶点和纹理坐标，通过修改矩阵实现翻转效果
const flipMatrix = [
  -1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0,
  0, 0, 0, 1
];
// 应用翻转矩阵到着色器
gl.uniformMatrix4fv(matrixLocation, false, flipMatrix);

以上方法提供了从简单到高级的图片翻转实现方案，可以根据项目需求选择合适的技术方案。