diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 86c6cb8ad5..0db907003c 100644
--- a/src/components/views/elements/ImageView.js
+++ b/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 (