中心元素css 3d變換

我有一個css 3d變換網站。有幾個css 3d定位元素，其中包括嵌套在其他3d轉換元素內部的元素。所有的轉換元素都在一個大的元素中。容器也在其上進行了轉換，並且在更大的包裝內。當點擊其中一個變形元素時，我希望容器進行變形，以便點擊的元素位於屏幕中間。被集中之後，我還要爲它被放大到所以它佔據了大部分屏幕中心元素css 3d變換

的我想要什麼的簡化例子：jsFiddle

不同的是，這只是簡單的和非動態。在我的情況，該元素將被放置在不同的地方爲不同的用戶

一兩件事：NO JQUERY!

來源

2013-08-05 Markasoftware

爲什麼「不jQuery」？ – jsalonen

我不使用它。但如果這可以在jQuery中完成，我仍然很想知道如何。 – Markasoftware

是的，它很笨重。 – Markasoftware

你想找的是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-05 22:36:25 Ryan

對不起，我的問題不清楚，但這不是我想要得到的。我實際上希望將元素置於中間，而不是將它放大。 – Markasoftware

@Markasoftware然後更改css-margin並將其定位爲絕對位置，以便它離開dom流。有一個過渡的好處是它會改變保證金也需要時間。 – Ryan

我希望所有包含元素都進行轉換，以便它位於中心。在現實中，有不止一個元素。 – Markasoftware

想要的是一些幾何api將點從一個座標系轉換到另一個座標系，如「localToGlobal」。目前幾何不存在api，比如Firefox GeometryUtils api（FF> 43）。 Chrome在那裏放棄了api：webkitConvertPointFromPageToNode之前的某些版本。我認爲IE10 +支持webkitConvertPointFromPageToNode函數。

你可以看看我只是爲了好玩的library（不穩定），它可以用作GeometryUtils的polyfill。只要你不使用視角，它應該很容易。只要將您的參考點（左上，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-14 19:00:27 jbenker

中心元素css 3d變換

回答

相關問題