I am using greensock's. I then I adapted the code from the linked site to be internal to the component I want to transform to add a. Edit Manager activePoint. The transform manager does everything relative to a center point, but when i recreate the image object the registration point is at the top left. I have found how to rotate around the center of the object using the transform matrix, but I can't seem to move the x and y correctly because these values change when you rotate.

Club GreenSock Learning Blog About. Get bounding rectangle of all transform items? Sign in to follow this.

I don't think it can resolve the problem because if its parent is display none or its grandparent(parent's parent) is display none, it is still fucked. If you loop it up to the document body, it will cause serious css reflow. And also, if the dom is not yet in the body, it is not gonna work. The project I am working on is that the dom is not in the body yet but I just want to initialize it. I think the better solution would be creating a fake body, and insert the element in it and getComputedStyle.

The only drawback is that if the transform properties are using percentage and its width and height are using percentage as well, we won't get the right values. But I guess it should be a reasonable solution rather than toggle it display block and none. I think a better solution would be to just define the individual properties rather than the 'transform' in your scenario. Like instead of transform:'transform3d(100px, 0, 0)', you can do x:100. This ensures that the end values get read correctly.

I'm not quite sure what you meant by a 'fake body' - you mean check if document.body exists and if not, create it, add the element, check the transform, and then remove both? Definitely sounds.well.less than ideal and performative. Could cause other issues too. Do you have any sample code that you'd recommend specifically? Maybe I'm just missing something obvious.

If I use x instead of translate3d(100px,0,0), it will use matrix2d instead of matrix3d and some browsers don't enable hardware acceleration with matrix2d. Glucotrend 2 Roche Manual. For the fake body, what you said is exactly what I meant but I don't think there will slow down the performance that much, because we can detect if the inline style already exists, if yes, then use it as reference.

Then only elements without inline style or elements with inline style but contains percentage will do the fake body thing. And also, we only do that at the beginning of the animation, so it doesn't really matter. The most important thing is. No one will actually use tweener to animate 3000 dom elements directly:-). Thermia Biomatic Manual there.

Awe, come on, who hasn't had a project that required animating at least 3000 dom elements? It's 2013 - everybody is gonna start doing it.;-) Performance aside, I try VERY hard to avoid messing with other parts of the dom unless it's absolutely necessary. I don't like making assumptions about the environment or risking collisions with other stuff the developer is doing. What if (for whatever reason) they're running in an environment where there is no such thing as a body tag?

What if they've got listeners set up to discover when something is added to the tree? It's unlikely, but possible. So my preference is to find other workarounds if at all possible. In your case, if your goal is to force 3D rendering (GPU), you could set z to 0.01 or something like that. Keep in mind that the old trick of using transform3d() or translateZ(0) no longer works in some browsers. That was a temporary hack that apparently some browser vendors are circumventing now.

Toggling the display is necessary either way. And re-nesting an element in the dom tree degrades performance further. To be clear, the current behavior DOES assume a normal transform of x:0, y:0, scaleX/scaleY:1, rotation:0 as the starting point. This issue simply has to do with the END values not being reported correctly by the browser. When you provide them as a transform string like transform:'translate3d(100px, 0, 0)', CSSPlugin must apply that to the object and then read back the matrix and interpret it (because your transform could have any number of sequential values like 'rotateX(20deg) skewY(10deg) translateZ(10px) rotateX(30deg).'