css transform 可实现 video 标签的旋转与镜像：水平镜像用 scalex(-1)，垂直镜像用 scaley(-1)，180° 翻转用 scale(-1,-1)，角度旋转用 rotate() 但有控件错位等坑；实时流默认镜像，导出需 canvas 手动翻转。
直接用 CSS 的 transform 就能实现 HTML <video></video> 标签的画面旋转与镜像翻转，无需 JS 或重编码，但不同需求对应不同做法，关键在“目的”和“是否要导出”。
水平镜像（自拍效果）最常用也最简单
给 <video></video> 加一行 CSS：
video {
transform: scaleX(-1);
transform-origin: center;
}
这样视频左右翻转，文字也会反向。如果页面里有叠加的文字或按钮需要保持正常方向，单独给它们加 transform: scaleX(-1) 补正即可。
垂直镜像（倒影效果）同理
video { transform: scaleY(-1); }
实际用得少，但做特效时很直观。
180° 翻转（上下+左右同时）
video { transform: scale(-1, -1); }
等效于旋转 180°，但注意：这不是“旋转”，而是坐标系缩放，文字照样反向。
单纯旋转角度（比如 90°、45°）可用 CSS，但有坑
video { transform: rotate(90deg); }
⚠️ 问题：
- 视频控件（播放/音量/进度条）会跟着旋转，错位甚至不可点；
-
video.videoWidth/video.videoHeight仍返回原始尺寸，布局计算容易出错； - 全屏时可能黑边、裁切或比例异常。
✅ 建议：仅用于视觉示意；若需稳定旋转（如竖屏视频横播），优先用 FFmpeg 预处理写入 rotation metadata，浏览器原生识别更可靠。
摄像头实时流（getUserMedia）默认就是镜像的
你看到的预览画面已经是 scaleX(-1) 效果，不用额外处理。只需 CSS 控制显示即可，性能零损耗。但注意：
- 实际 MediaStream 数据仍是原始方向；
- 若要用 canvas 截图或上传镜像帧，必须在
drawImage前做ctx.translate + ctx.scale，否则导出的是未翻转的原始画面。
Canvas 绘制时做镜像（适合截图/上传/图像处理）
不能只靠 CSS，得在绘图逻辑里翻转：
ctx.translate(canvas.width, 0); ctx.scale(-1, 1); ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
画完记得 ctx.setTransform(1, 0, 0, 1, 0, 0) 恢复坐标系，避免影响后续绘制。
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
