CSS中的直接线性变换

可以在CSS中进行DLT吗？如果是，这是如何实现的？我想不出一种只使用变换：矩阵的方法。。。如果这是不可能的，那么另一种方法是什么

---

我试图达到的特殊效果是以类似Safari的方式布置div：

以下是对您的请求的一个非常粗略和非通用的回答。 您可以轻松地扩展它，以获得一个通用的更好的解决方案

在我的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

，等等）

如果有时间，我今晚会更新我的帖子：）

---

编辑：作为承诺，这里有一个更好的版本。现在它更加通用，根据窗口的大小，您将获得正确数量的立方体。这还远远不够完美（你可以通过调整立方体的大小来获得更好的深度感），但一般来说，你会发现这是可能的，甚至是动态的：） 这是小提琴：

要深入了解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)';
        }
    }
}

函数分派（）{
var sizeOfImg=150；
var windowWith=document.body.offsetWidth；
var widthRest=windowWith%sizeOfImg；
var nbSquareRow=数学地板（带/sizeOfImg的窗户）；
dlt（nbrow）；
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'）；
对于（var i=0，length=square.length；iI）可以，但我认为这是一个回退选项。您如何在jQuery中实现它？在我的浏览器历史记录中，有一个Carousel插件具有类似的效果。也许您可以仅使用CSS复制它。主要问题是依赖于CSS转换、旧浏览器（即IE）无法重现这种效果我不太关心浏览器支持。我想我可以使用CSS以外的东西，但仍然不确定如何使用…顺便说一句，如果你不遵循我的代码并简单添加
unityrotadeg
，而是做了一种贝塞尔曲线来在你的总览中真正感受到深度。（边框中的立方体旋转得更多，而靠近中心的立方体则会发生变化）