html - 图像源是镜像，如何将图像转换为非镜像

Question

功能:

用户站在相机前拍照。

做了什么:

使用了 <video>捕捉运动图像并创建了一个“拍照”按钮来捕捉图像以施加静止图像。还整合了缩放功能。

问题:

图像是镜像的。因此，当用户向左移动时，视频源中的图像将向右移动，而当用户向左移动时，视频源中的图像将向右移动。

我更改了以下 transform:rotateY() ，但是，它仍然给我相同的功能，即当用户向左移动时，相机源中的图像向右移动，反之亦然。因此，我做错了什么以及如何纠正以下问题。

.camera_feed_flip {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  /* Safari and Chrome */
  -moz-transform: rotateY(0deg);
  /* Firefox */
  transform: scale(1.0);
}

<div id="CameraFeed" align="center" style="position:absolute; widths:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=7; top:600px; left:0px; ">

  <video id="video" width="1300px" height="1350" class="camera_feed_flip" style="position:absolute; z-index:16; top: 600px; left:-110px" autoplay></video>
</div>

Answer 1

我根本不知道 transform css，但让我印象深刻的是你将图像旋转了 0 度(因此根本没有改变它)。不应该是 180 度吗？

.camera_feed_flip {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  /* Safari and Chrome */
  -moz-transform: rotateY(180deg);
  /* Firefox */
  transform: scale(1.0);
}

但后来我从未使用过这个 css。我可能不准确，因此给你一个不正确的解决方案 - 如果是这样的话，我很抱歉 :)