Trasformazione lineare diretta nei CSS

Question

È possibile eseguire una DLT in CSS? Se è così, come viene realizzato? Non riesco a pensare a un modo usando solo transform: matrix ... Se questo non è possibile, quale sarebbe un approccio alternativo?

L'effetto particolare che sto cercando di realizzare è layout di div in un modo simile a come Safari fa questo:

Answer 1

Qui è una risposta molto agitato e non generico alla vostra richiesta. http://jsfiddle.net/3t5SM/ Si potrebbe facilmente estenderlo per ottenere una soluzione generica molto migliore.

nel mio CSS,

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

l'idea di base è quella di creare uno stile per ogni colonna (qui chiamo la id ma ancora una volta, sarebbe meglio avere uno stile per ogni colonna e definire le colonne come .left, .middle, .right, ecc)

io aggiornare il mio post stasera se ho il tempo di entrare nei dettagli :)

---

EDIT: come promessa, ecco una versione leggermente migliore. Ora è molto più generico e, a seconda delle dimensioni della tua finestra, otterrai il numero giusto di cubi. È ancora lontano dall'essere perfetto (potresti giocare con le dimensioni dei cubi per ottenere una sensazione di profondità migliore), ma in generale vedi che è possibile, anche dinamicamente :) ecco il violino: http://jsfiddle.net/P84qd/4/

di andare un po 'nei dettagli del 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)'; 
     } 
    } 
} 

la funzione dispatch è una semplice funzione che distribuirà i quadrati sulla tua pagina web con margini uguali (in alto, a sinistra, a destra, in basso). L'ho preso da 1. La funzione dlt calcola il numero di colonne e definisce la quantità di rotazione per ogni colonna (nel mio esempio il valore di rotazione massimo è 40). Il resto del codice sono puramente dei controlli matematici per farlo funzionare correttamente.

Per ottenere un risultato migliore, è necessario giocare con le dimensioni di ogni quadrato, ma attenzione perché la funzione dispatch deve anche conoscere la dimensione del quadrato per calcolare quanti quadrati sarà possibile visualizzare per riga. Ti lascio divertire con esso;)