86

Is that possible to make a video inside tag mirrored horizontally or vertically?

5 Answers 5

163

You can do it using a CSS3 3D transformation.

#videoElement
{
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}

This will rotate it 180 degrees around its Y axis (so you're now looking at it from behind) which gives the same appearance as being mirrored.

Example at http://jsfiddle.net/DuT9U/1/

14
  • 9
    Rotating an object is different than mirroring it!
    – Veger
    Commented Jan 22, 2013 at 10:39
  • 12
    @Veger - if you rotate it 180 degrees, you've flipped it half-way-around, which means you're looking at it from behind. This gives the same appearance as being mirrored. You can rotateX(180deg) to give the appearance of being mirrored top-to-bottom as well. Try it yourself and see.
    – PhonicUK
    Commented Jan 22, 2013 at 10:55
  • 2
    No... Flipping is like looking in a mirror, all x (or y) coordinates are swapped. Rotating it applying a more complex formula to all coordinates. Note: flipping horizontally and vertically is equal to rotating 180 degrees. (But this is 'coincidence'), See this page for a graphical comparison.
    – Veger
    Commented Jan 22, 2013 at 11:02
  • 6
    @Verger, if it gives the same appearance then any technicalities are irrelevant. And since the only other way to 'flip' something with CSS is by using a negative scale then it's pretty moot. It's all hardware accelerated so there's no performance difference either.
    – PhonicUK
    Commented Jan 22, 2013 at 11:08
  • 2
    Yes it does - rotating 180 degrees makes it look mirrored - jsfiddle.net/DuT9U/1
    – PhonicUK
    Commented Jan 22, 2013 at 11:17
18

You can use CSS3 scaleX or scaleY set to -1 to respectively flip the video horizontally or vertically.

11

Using JavaScript, if video is the video element, to mirror (flip horizontally) you can use

video.style.cssText = "-moz-transform: scale(-1, 1); \
-webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); \
transform: scale(-1, 1); filter: FlipH;";

To flip vertically you can use

video.style.cssText = "-moz-transform: scale(1, -1); \
-webkit-transform: scale(1, -1); -o-transform: scale(1, -1); \
transform: scale(1, -1); filter: FlipV;";
2
  • 1
    Interesting, does the flip inflict a performance penalty for video?
    – Michael IV
    Commented Oct 1, 2017 at 6:57
  • @MichaelIvanov In my experience I haven't really noticed performance penalties
    – Andrew
    Commented Oct 2, 2017 at 0:44
6

By any chance if somebody wants a working example, here is the code (with mirrored/rotated). Refer the video element #videoElement under style tag:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>

<style>
#container {
    margin: 0px auto;
    width: 500px;
    height: 375px;
    border: 10px #333 solid;
}
#videoElement {
    width: 500px;
    height: 375px;
    background-color: #666;
    /*Mirror code starts*/
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
    /*Mirror code ends*/
}

</style>
</head>

<body>
<div id="container">
    <video autoplay="true" id="videoElement">

    </video>
</div>
<script>
 var video = document.querySelector("#videoElement");

 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

 if (navigator.getUserMedia) {
     navigator.getUserMedia({video: true}, handleVideo, videoError);
 }

 function handleVideo(stream) {
     video.src = window.URL.createObjectURL(stream);
 }

 function videoError(e) {
     // do something
}
</script>
</body>
</html>
6

to prevent rotating controls

video {
  transform: scale(-1,1);
}
video::-webkit-media-controls-panel {
 transform: scale(-1,1);
  }
1
  • I could not manage to make it work for Firefox. Do you have a tip for this?
    – Liris
    Commented Dec 5, 2023 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.