From 7a8b563c02dc71c988b0e2fdc494a6d9425294c3 Mon Sep 17 00:00:00 2001 From: Scott Worley Date: Sun, 24 May 2015 20:51:57 -0700 Subject: [PATCH 1/1] 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