CSS3 Transforms: Multiple Origins?

Question

Is it possible to specify an origin at the top left (0%, 0%) for scaling, and a different origin (center) for rotation in CSS3? I am only working with webkit, if that helps.

I am currently using a transform list (i.e. -webkit-transform: scale(newScale) rotate(newRotate)

but it seems like it isn't possible to change the origin in-between passes. Is there a better way to look at this? Presently, if I scale an object and rotate it with an origin at the default center, the position of the element is now off and so when you drag the element, the cursor is still at the top left of the element, whereas it should be at the center. Changing the origin to the center to scale it fixes this, but presents new problems with rotation and flipping.

Answer 1

Found a good solution to the problem... by creating a parent/child relationship as follows:

<div class="container">
   <img src="" />
</div>

I can now setup two classes as follows:

.container {
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: scale(0.5);
}

.container img {
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotate(45deg);
}

This will do exactly what I want: scale with an origin at the top left, then rotate with the origin at the center. Voila!