center element css 3d transforms

Question

I have a css 3d transforms site. There are several css 3d positioned elements, including some nested inside of other 3d transformed elements. All of the transformed elements are inside of one big containing element. The container also have transforms on it, and it is inside of an even bigger wrapper. When one of the transformed elements is clicked, I want the container to transform so that the clicked element centers into the middle of the screen. After being centered, I would also like for it to be zoomed into so it takes up most of the screen

A simplified example of what I want: jsFiddle

the difference is this is just simple and non-dynamic. In my situation, the elements will be positioned at different places for different users

and one thing: NO JQUERY!

Answer 1

What your looking for is transform: scale()

Working example here : jsfiddle

Just add this to your function: scale(1.5) as seen below.

transformed.onclick=function(){
    if(isTransformed){
        container.style.transform='';
        container.style.webkitTransform='';
        isTransformed=false;
    }
    else{
        container.style.transform='rotateY(-70deg) scale(1.5)';
        container.style.webkitTransform='rotateY(-70deg) scale(1.5)';
        isTransformed=true;

Answer 2

Want you want is some geometry api to transform points from one coordinate-system to another, like "localToGlobal". Currently there is no api for Geometry like the Firefox GeometryUtils api (FF >43). Chrome dropped there api: webkitConvertPointFromPageToNode some versions ago. I think IE10+ supports the webkitConvertPointFromPageToNode function.

You can take a look at my just-for-fun library (not stable yet), which can be used as polyfill for the GeometryUtils. So long you don not use perspective, it should be easy. Just transform your reference points (topLeft, topRight, ...) to local element's parent (or offsetParent) space and create a matrix:

var tx = localTopLeft;
var ty = localTopRight;
var scaleX = (localTopRight - tx) / element.offsetWidth;
var scaleY = (localBottomRight - ty) / element.offsetHeight;
var rawMatrix = [scaleX, 0, 0, scaleY, tx, ty];
element.style.transformOrigin = "0px 0px";
element.style.transform = "matrix(" + rawMatrix.join(",") + ")";

If it becomes more complex, try using some "AffineFit" algorithm to create the matrix.

Good luck