Reduce jank

[picsort] / picsorter.css

diff --git a/picsorter.css b/picsorter.css
index b99fc9e334a5be1cb9cdbc27a0eb45d187ad53bd..943bbd38f3aa0ef4e3e161c4f45b38308345c1de 100644 (file)
--- a/picsorter.css
+++ b/picsorter.css
@@ -7,6 +7,28 @@
     to { opacity: 0; }
 }
 
     to { opacity: 0; }
 }
 

+.rot90 {
+  rotation: 90deg;
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+}
+.rot180 {
+  rotation: 180deg;
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+}
+.rot270 {
+  rotation: 270deg;
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+

 #message {
   position: fixed;
   font-size: 18pt;
 #message {
   position: fixed;
   font-size: 18pt;


@@ -19,6 +41,17 @@
   background-color: rgba(200,200,200,0.5);
 }
 
   background-color: rgba(200,200,200,0.5);
 }
 

+#namecontainer {
+  position: fixed;
+  width: 100%;
+}
+#name {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  font-size: 30pt;
+}
+

 .fade {
   opacity: 0;
   animation-duration: 2s;
 .fade {
   opacity: 0;
   animation-duration: 2s;