I know what a center is, and I know what an origin is, but the phrase "center of origin" doesn't mean anything to me.  I'm guessing that originX,Y represent the point of the image that is on top of the center of the viewport. Is that right?  I assume that those can be derived from the image and viewport size and the top, left point, right?  

I was hoping that you'd be able to encapsulate the rotation somehow so that you just added the CSS rotation and swapped the width and height and everything else more-or-less just worked.  If that is possible, it would be a smaller patch that was easier to review.  

If that is not possible, then defining new properties like originX,Y to make your calculations clear is great, as long as they're documented enough.

I don't know if the "transforms only have to be done once" makes any difference for performance. I suspect that everything just ends up going to the GPU and is done quickly regardless.  So that doesn't justify adding the extra element.  

But if it makes your code clearer, or especially if it makes event handling simpler, then adding that extra container is a great idea.