2012-11-15 40 views
9

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?CSS'de doğru doğrusal dönüşüm

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

+0

jQuery kullanamaz mı? –

+0

Yapabilirim, ama bunun bir geri dönüş seçeneği olduğunu düşünüyorum. JQuery'de nasıl yaparsın? –

+0

Tarayıcı geçmişimde benzer bir etkiye sahip bir yerde bir Carousel eklentisi var. Belki sadece CSS kullanarak çoğaltabilirsiniz. Ana sorun, CSS dönüşümlerine bağlı olmaktır, eski tarayıcılar (yani IE) bu etkiyi yeniden üretemeyecektir –

cevap

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

+0

Fantastik, teşekkürler! –

+0

benim cevabımı güncelledi :) – leMoisela

+0

btw, daha iyi bir sonuç alırsanız, kodumu takip etmek ve basitçe 'unityRotatDeg' ekleme yapmak yerine, genel bakışta derinlik hissini almak için bir çeşit Bezier eğrisi yaptınız. (Sınırdaki küpler çok daha fazla dönecek, oysa merkeze yakın küpler değişecek) – leMoisela