Question

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

我想要的简化示例：jsFiddle

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

一件事：NO JQUERY!

Answer 1

您要找的是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;

Answer 2

想要的是一些几何api将点从一个坐标系转换到另一个坐标系，例如＆＃34; localToGlobal＆＃34;。目前没有类似Firefox GeometryUtils api（FF＆gt; 43）的Geometry的api。在某些版本之前，Chrome放弃了api：webkitConvertPointFromPageToNode。我认为IE10 +支持webkitConvertPointFromPageToNode函数。

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

{{1}}

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

祝你好运

中心元素css 3d变换

2 个答案: