CSS3 Transformations: Multiple Sources?

Question

Is it possible to indicate the beginning in the upper left corner (0%, 0%) for scaling and another origin (in the center) for rotation in CSS3? I only work with webkit if that helps.

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

but it seems that changing the gaps between the intermediate passes is impossible. Is there a better way to take a look at this? Currently, if I scale the object and rotate it with the beginning in the center by default, the position of the element is now turned off, and so when you drag the element, the cursor is still in the upper left corner of the element, while it should be in the center. Changing the origin to the center, he fixes it, but presents new problems with rotation and inversion.

Answer 1

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

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

Now I can configure the 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: scaling with the beginning in the upper left corner, and then turning with the beginning in the center. Voila!

Answer 2

What about: http://jsfiddle.net/22Byh/1/

Answer 3

Instead, think of scaling with a start (0,0) as scaling + translation with a center of origin. Separately:

 -webkit-transform-origin: top left; -webkit-transform: scale(1.5); 

matches with:

 -webkit-transform-origin: center; -webkit-transform: scale(1.5) translate3d(16.66%, 16.66%, 0); 

Theoretically, the center of the start of rotation should leave angles sticking out at sqrt(1/2)-0.5 , requiring us to move the beginning down and to the right by 20.71% , but for some reason the webkit transform algorithm carries things for us (but not really enough) and scales the origin for us (again, not quite). Thus, we need to move 50% to the right and make some adjustments for this odd behavior:

 -webkit-transform-origin: center; -webkit-transform: scale(1.5) rotate(45deg) translate3d(52.5%, 0.5%, 0); -webkit-transition: all 2s ease-in; 

Note. My original answer used a div with width:100px; and height100px; which requires translate3d(54px, 0, 0) .