中心元素css 3d變換

Question

我有一個CSS 3D轉換站點。 有3個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，將點從一個坐標系轉換到另一個坐標系，例如“ 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”算法來創建矩陣。

祝好運