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: enter image description here

I can, but I'm considering that a fallback option. How would you do it in jQuery? — HRÓÐÓLFR, Nov 15 '12 at 21:51
There is a Carousel plugin somewhere in my browser history that has a similar effect. Maybe you can replicate it using only CSS. The main problem is to depend on CSS transformations, older browsers (i.e IE) won't be able to reproduce this effect — Bruno Vieira, Nov 15 '12 at 21:54
I'm not too concerned with browser support in this case though. I suppose I'm fine with using something other than CSS but still not sure how... — HRÓÐÓLFR, Nov 15 '12 at 22:12

score 2 · Accepted Answer · edited May 23 '17 at 11:43

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 ;)

btw, you would get a better result if instead of following my code and doing simple addition of `unityRotatDeg` you did a kind of Bezier curve in order to really get the feeling of depth in your overview. (the cubes in the border would rotate much more, whereas the cubes near the center will beraly change) — leMoisela, Nov 17 '12 at 12:02

Direct linear transformation in CSS

1 Answers1