CSS'de doğru doğrusal dönüşüm

Question

CSS'de DLT yapmak mümkün mü? Eğer öyleyse, bu nasıl başarılır? Sadece transform: matrix'u kullanarak bir yol düşünemiyorum ... Bu mümkün değilse, alternatif bir yaklaşım ne olurdu?

elde etmek çalışıyorum belirli etki Safari bunu nasıl benzer bir şekilde div'leri dışarı atarken: İşte

Answer 1

isteğinize çok kaba ve genel olmayan cevaptır. http://jsfiddle.net/3t5SM/ Genel olarak çok daha iyi bir çözüm elde etmek için kolayca genişletebilirsiniz. benim CSS

,

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

temel fikir her sütun (burada i kimliklerini arıyorum ama yine, her sütun için bir stili var ve tanımlamak daha iyi olurdu için bir stil yaratmak Ben detaylara girmek zamanınız varsa benim sonrası bu gece güncellenir .left, .middle, .right, vs)

olarak sütunlar :)

---

DÜZENLEME: söz olarak, burada biraz daha iyi bir versiyonu. Şimdi çok daha genel ve pencerenizin boyutuna bağlı olarak, doğru sayıda küp elde edersiniz. Yine de mükemmel olmaktan çok uzaktır (daha iyi bir derinlik hissi elde etmek için küplerin büyüklüğü ile oynayabilirsiniz), fakat genel olarak bunun mümkün olduğunu, hatta dinamik olarak görebildiğini görürsünüz. burada keman: http://jsfiddle.net/P84qd/4/

javascript detaya biraz gitmek için:

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 fonksiyon eşit marjlar (üst, sol, sağ, alt) ile web sayfasındaki kareler dağıtacak basit işlevdir. 1'dan aldım. dlt işlevi, sütun sayısını hesaplar ve her sütun için döndürme miktarını tanımlar (örneğimde maksimum döndürme değeri 40'tır). Kodun geri kalanı, düzgün çalışmasını sağlamak için yalnızca bazı matematik kontrolleridir.

Daha iyi bir sonuç elde etmek için, her bir karenin boyutuyla oynamalısınız, ancak dikkatli olun, çünkü dispatch işlevinin karenin boyutunu bilmesi gerekir. Bu, kare başına kaç karenin görüntülenmesine izin verileceğini hesaplar. kürek çekmek. Bununla eğlenmene izin vereceğim;)