Fixed translation issue while the image is rotated

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/components/views/elements/ImageView.js

@@ -242,11 +242,15 @@ export default class ImageView extends React.Component {
         const zoomPercentage = this.state.zoom/100;
         const translatePixelsX = this.state.translationX + "px";
         const translatePixelsY = this.state.translationY + "px";
+        /* The order of the values is important!
+         * First, we translate and only then we rotate, otherwise
+         * we would apply the translation to an already rotated
+         * image causing it translate in the wrong direction. */
         const style = {
-            transform: `rotate(${rotationDegrees})
+            transform: `translateX(${translatePixelsX})
+                        translateY(${translatePixelsY})
                         scale(${zoomPercentage})
-                        translateX(${translatePixelsX})
-                        translateY(${translatePixelsY})`,
+                        rotate(${rotationDegrees})`,
         };
 
         return (