中心元素css三维变换

center element css 3d transforms

本文关键字：三维 变换 css 元素      更新时间：2023-09-26

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

我想要的一个简化示例：jsFiddle

不同的是，这只是简单而非动态的。在我的情况下，元素将被定位在不同的地方，用于不同的用户

还有一件事：NO JQUERY!

您想要的是transform: scale()

这里的工作示例：jsfiddle

只需将其添加到您的函数中即可：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 GeometryUtils这样的Geometry api（FF>43）。Chrome在一些版本之前就删除了api:webkitConverPointFromPageToNode。我认为IE10+支持webkitConverPointFromPageToNode函数。

你可以看看我的趣味库（还不稳定），它可以用作GeometryUtils的polyfill。只要你不使用透视法，这应该很容易。只需将您的参考点（topLeft、topRight…）转换为本地元素的父（或offsetParent）空间，然后创建一个矩阵：

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

如果它变得更复杂，可以尝试使用一些"仿射拟合"算法来创建矩阵。

祝好运

相关文章：