From 7a8b563c02dc71c988b0e2fdc494a6d9425294c3 Mon Sep 17 00:00:00 2001
From: Scott Worley <scottworley@scottworley.com>
Date: Sun, 24 May 2015 20:51:57 -0700
Subject: [PATCH] Don't cut off the top of rotated pictures

---
 picsorter.css | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/picsorter.css b/picsorter.css
index 4fedf86..bad3b89 100644
--- a/picsorter.css
+++ b/picsorter.css
@@ -7,26 +7,32 @@
     to { opacity: 0; }
 }
 
+img {
+  -webkit-transform-origin: top left;
+  -ms-transform-origin: top left;
+  transform-origin: top left;
+}
+
 .rot90 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-  -webkit-transform: rotate(90deg);
-  -moz-transform: rotate(90deg);
-  -o-transform: rotate(90deg);
-  rotation: 90deg;
+  -webkit-transform: rotate(90deg) translateY(-100%);;
+  -moz-transform: rotate(90deg) translateY(-100%);;
+  -o-transform: rotate(90deg) translateY(-100%);;
+  rotation: 90deg translateY(-100%);;
 }
 .rot180 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -o-transform: rotate(180deg);
-  rotation: 180deg;
+  -webkit-transform: rotate(180deg) translate(-100%,-100%);
+  -moz-transform: rotate(180deg) translate(-100%,-100%);
+  -o-transform: rotate(180deg) translate(-100%,-100%);
+  rotation: 180deg translate(-100%,-100%);
 }
 .rot270 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-  -webkit-transform: rotate(270deg);
-  -moz-transform: rotate(270deg);
-  -o-transform: rotate(270deg);
-  rotation: 270deg;
+  -webkit-transform: rotate(270deg) translateX(-100%);
+  -moz-transform: rotate(270deg) translateX(-100%);
+  -o-transform: rotate(270deg) translateX(-100%);
+  rotation: 270deg translateX(-100%);
 }
 
 #message {
-- 
2.44.1