update face example to flip display horizontally

hiukim · Feb 8, 2023 · 38266e6 · 38266e6
1 parent 287b5d0
commit 38266e6
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 1 deletion.
diff --git a/examples/face-tracking/example1.html b/examples/face-tracking/example1.html
@@ -18,6 +18,7 @@
       position: absolute;
       width: 100%;
       height: 100%;
+      transform: scaleX(-1);
     }
   </style>
 </head>

diff --git a/examples/face-tracking/example2.html b/examples/face-tracking/example2.html
@@ -43,6 +43,7 @@
         position: absolute;
         width: 100%;
         height: 100%;
+        transform: scaleX(-1);
       }
       .options-panel {
 	position: fixed;

diff --git a/examples/face-tracking/example3.html b/examples/face-tracking/example3.html
@@ -58,6 +58,7 @@
         position: absolute;
         width: 100%;
         height: 100%;
+        transform: scaleX(-1);
       }
 
       #example-control-overlay {

diff --git a/examples/face-tracking/three-css.html b/examples/face-tracking/three-css.html
@@ -31,6 +31,7 @@
 	height: 100vh;
 	position: relative;
 	overflow: hidden;
+        transform: scaleX(-1);
       }
       #ar-div {
 	width: 1000px;
@@ -44,14 +45,19 @@
 	align-items: center;
 	color: white;
       }
+      #ar-div > div {
+        transform: scaleX(-1);
+      }
     </style>
   </head>
   <body>
     <div id="container">
     </div>
 
     <div id="ar-div">
-      This is a CSS div
+      <div>
+        This is a CSS div
+      </div>
     </div>
   </body>
 </html>

diff --git a/examples/face-tracking/three-facemesh.html b/examples/face-tracking/three-facemesh.html
@@ -38,6 +38,7 @@
       height: 100vh;
       position: relative;
       overflow: hidden;
+      transform: scaleX(-1);
     }
   </style>
 </head>

diff --git a/examples/face-tracking/three.html b/examples/face-tracking/three.html
@@ -45,6 +45,7 @@
       height: 100vh;
       position: relative;
       overflow: hidden;
+      transform: scaleX(-1);
     }
 
     #control {