From: Scott Worley Date: Mon, 25 May 2015 03:51:57 +0000 (-0700) Subject: Don't cut off the top of rotated pictures X-Git-Url: http://git.scottworley.com/picsort/commitdiff_plain/7a8b563c02dc71c988b0e2fdc494a6d9425294c3 Don't cut off the top of rotated pictures --- 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 {