0

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

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

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

还有一件事：NO JQUERY!

4

2 回答 2

0

你要找的是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;
于 2013-08-05T22:36:25.007 回答
0

您想要的是一些几何 api，用于将点从一个坐标系转换到另一个坐标系，例如“localToGlobal”。目前没有像 Firefox GeometryUtils api (FF >43) 这样的 Geometry api。Chrome 在某些版本前放弃了 api: webkitConvertPointFromPageToNode。我认为 IE10+ 支持 webkitConvertPointFromPageToNode 功能。

你可以看看我的有趣的库（还不稳定），它可以用作 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(",") + ")";

如果它变得更复杂，请尝试使用一些“AffineFit”算法来创建矩阵。

祝你好运

于 2015-08-14T19:00:27.977 回答