9

是否可以在 CSS 中进行 DLT？如果是这样，这是如何实现的？我想不出一种方法来使用transform: matrix...如果这是不可能的，那么另一种方法是什么？

我想要达到的特殊效果是以类似于 Safari 的方式来布置 div：在此处输入图像描述

4

1 回答 1

1

这是对您的要求的非常粗略且非通用的答案。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等）

如果我有时间详细介绍，我今晚会更新我的帖子:)

编辑：作为承诺，这里有一个更好的版本。现在它更加通用，并且根据窗口的大小，您将获得正确数量的立方体。它仍然远非完美（您可以使用立方体的大小以获得更好的深度感），但总的来说，您会发现它是可能的，甚至是动态的 :) 这里是小提琴：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函数还需要知道正方形的大小来计算每行允许显示多少个正方形。我会让你玩得开心;) ​</p>

于 2012-11-16T15:52:21.850 回答