Direct linear transformation in CSS

Question

Is it possible to do a DLT in CSS? If so, how is this accomplished? I can't think of a way using just transform: matrix... If this is not possible, what would be an alternative approach?

The particular effect I'm trying to achieve is laying out divs in a way similar to how Safari does this:

Answer 1

Here is a very rough and non-generic answer to your request. http://jsfiddle.net/3t5SM/ You could easily extend it to get a generic much better solution.

in my CSS,

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

the basic idea is to create a style for each column (here i'm calling the id's but again, it would be better to have a style for each column and define the columns as .left, .middle, .right, etc)

I'll update my post tonight if I have the time to go into the details :)

---

EDIT: as promise, here is a little better version. Now it is much more generic and depending on the size of your window, you'll get the right number of cubes. It is still far from being perfect (you could play with the size of the cubes in order to get a better depth feeling), but in general you see that it is possible, even dynamically :) here is the fiddle: http://jsfiddle.net/P84qd/4/

To go a little into the details of the 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)';
        }
    }
}

The dispatch function is a simple function that will distribute the squares on your web page with equal margins (top, left, right, bottom). I took it from 1. The dlt function calculates the number of columns and defines the rotation amount for each column (in my example the maximum rotation value is 40). The rest of the code are purely some math checks in order to make it work correctly.

In order to get a better result, you should play with the size of each square, but be careful because the dispatch function also needs to know the size of the square to calculate how many squares will be allowed to be displayed per row. I'll let you have fun with it ;) ​