Javascript 中心元素css 3d变换

我有一个css 3d转换网站。有几个css 3d定位元素，包括一些嵌套在其他3d转换元素内部的元素。所有转换的元素都在一个大的包含元素内。容器上也有转换，它位于一个更大的包装器中。单击其中一个已转换的元素时，我希望容器进行转换，以便单击的元素集中在屏幕中间。在居中之后，我也希望它能被放大，这样它就占据了大部分屏幕

我想要什么的一个简化示例：

不同之处在于，这只是简单和非动态的。在我的情况下，元素将针对不同的用户定位在不同的位置

---

还有一件事：

没有JQUERY
您要查找的是
transform:scale（）

此处的工作示例：

只需将此添加到函数中：
scale（1.5）
，如下所示

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;

您需要的是一些几何体api，用于将点从一个坐标系转换到另一个坐标系，如“localToGlobal”。目前没有像Firefox api那样的几何体api（FF>43）。Chrome在一些版本之前删除了api:webkitConvertPointFromPageToNode。我认为IE10+支持webkitConvertPointFromPageToNode函数

你可以看看我的只是为了好玩（还不稳定），它可以用作几何体的填充物。只要你不使用透视图，这应该很容易。只需将参考点（左上角、右上角……）转换为本地元素的父（或偏移父）空间，并创建一个矩阵：

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(",") + ")";

如果变得更复杂，尝试使用一些“仿射”算法来创建矩阵

祝你好运，我不用它。但是如果这可以在jQuery中实现，我仍然很想知道如何实现。是的，它非常庞大。啊，对了，我现在明白了：您正在使用mootools，对吗？使用它可以吗？啊，是的，旧的StackOverflow jQuerycomplex@jsalonen很抱歉，我的问题不清楚，但这并不是我想要得到的。实际上，我想把元素放在中间，而不是让它变大。@ Markasoftware然后改变CSS边距并使其绝对位置，这样它就离开了DOM流。有一个过渡的好处是，它会使边距的变化也需要时间。我希望所有包含的元素都进行转换，使其位于中间。在现实中，有不止一个元素。@Markasoftware好吗？你试过什么？告诉我你有什么，为什么它不起作用。那我也许能帮上忙。我想知道怎么做。我在3d方面没有太多经验