css - CSS中的直接线性变换

是否可以在CSS中进行DLT？如果是这样，这是如何完成的？我想不出一种仅使用transform: matrix的方法...如果无法实现，那还有什么替代方法？

我试图实现的特殊效果是以类似于Safari的方式布置div:

最佳答案

这是对您的要求的非常粗略和非一般性的答案。 http://jsfiddle.net/3t5SM/
您可以轻松地对其进行扩展，以获得更好的通用解决方案。

在我的CSS中

#id1, #id4, #id7{
 -webkit-transform: rotateY(40deg);
}
#id3, #id6, #id9{
 -webkit-transform: rotateY(-40deg);
}
#id2, #id5, #id8{
 -webkit-transform: scale(0.94);
}

基本思想是为每列创建样式(在这里，我称为id，但同样，最好为每列具有样式并将列定义为.left，.middle，.right等

如果有时间详细说明，我今晚将更新我的帖子:)

编辑:作为 promise ，这是一个更好的版本。现在，它变得更加通用，并且根据窗口的大小，您将获得正确数量的多维数据集。距离完美还很远(您可以尝试使用立方体的大小来获得更好的深度感)，但总的来说，您甚至可以看到它是可能的:)
这是 fiddle :http://jsfiddle.net/P84qd/4/

要深入了解javascript的详细信息，请执行以下操作:

function dispatch(){
    var sizeOfImg = 150;
    var windowWith = document.body.offsetWidth;
    var widthRest = windowWith%sizeOfImg;
    var nbSquareRow = Math.floor(windowWith/sizeOfImg);
    dlt(nbSquareRow);
    var marginVal = widthRest/(nbSquareRow+1);
    var lineout = document.getElementById('lineout');
    lineout.style.paddingLeft = marginVal+'px';
    lineout.style.paddingTop = marginVal+'px';
    var square = document.getElementsByTagName('div');
    for(var i=0, length = square.length;i<length; i++){
        if(square[i].className === 'square'){
            square[i].style.marginRight = marginVal+'px';
            square[i].style.marginBottom = marginVal+'px';
        }
    }
}

dispatch();
window.onresize = function(e){dispatch();};

function dlt(nbSquareRow){
    var maxRotatDeg = 40;
    var isEven=true;
    if(nbSquareRow%2 == 0){
        var unityRotatDeg = maxRotatDeg/(nbSquareRow/2);
    }else{
        var unityRotatDeg = maxRotatDeg/((nbSquareRow-1)/2);
        isEven = false;
    }
    var middle = Math.floor(nbSquareRow/2);
    var mySquares = document.getElementsByTagName('div');
    for(var j=0, sqleng = mySquares.length;j<sqleng; j++){
        if(mySquares[j].className == 'square'){
            var colNumb = (parseInt(mySquares[j].id)-1)%nbSquareRow;
            var myMultiplier = (middle-colNumb);
            if(isEven && myMultiplier<=0){
                myMultiplier--;
            }
            mySquares[j].style.webkitTransform = 'rotateY('+(unityRotatDeg*myMultiplier)+'deg)';
        }
    }
}

dispatch函数是一个简单的函数，它将以相等的边距(顶部，左侧，右侧，底部)在您的网页上分布正方形。我从1拿走了。dlt函数计算列数并定义每列的旋转量(在我的示例中，最大旋转值为40)。其余代码纯粹是一些数学检查，以使其正常工作。

为了获得更好的结果，您应该使用每个正方形的大小，但是要小心，因为dispatch函数还需要知道正方形的大小，以计算每行允许显示多少个正方形。我会让你玩得开心;)