With css rotate property, the default transform-origin property unexpectedly changes from its default value ‘50% 50%’ to ‘top left’ when the size of the rotating object is set in percentage. When setting the size in pixels, the object transform-origin gets back to it center. See the Pen yyZXyL by akinorikul (@akinorikul) on CodePen.