सीएसएस

Question

में प्रत्यक्ष रैखिक परिवर्तन सीएसएस में डीएलटी करना संभव है? यदि हां, तो यह कैसे पूरा हुआ? मैं सिर्फ transform: matrix का उपयोग करके किसी तरीके से नहीं सोच सकता ... यदि यह संभव नहीं है, तो वैकल्पिक दृष्टिकोण क्या होगा?

विशेष प्रभाव मैं प्राप्त करने के लिए कोशिश कर रहा हूँ एक तरह से कैसे सफारी करता है के समान में divs बिछाने है:

Answer 1

यहां आपके अनुरोध के लिए एक बहुत ही किसी न किसी और गैर सामान्य जवाब है। http://jsfiddle.net/3t5SM/ आप इसे सामान्य रूप से बेहतर समाधान प्राप्त करने के लिए आसानी से बढ़ा सकते हैं।

मेरी सीएसएस में

,

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

मूल विचार प्रत्येक स्तंभ (यहाँ मैं आईडी के फोन कर रहा हूँ, लेकिन फिर से, यह बेहतर होगा प्रत्येक स्तंभ के लिए एक शैली है और परिभाषित करने के लिए के लिए एक शैली बनाने के लिए है कॉलम .left, .middle, .right, आदि)

के रूप में मैं अपनी पोस्ट आज रात को अपडेट कर देंगे अगर मैं समय विस्तार में जाना है :)

---

संपादित करें: वादा के रूप में, यहां थोड़ा बेहतर संस्करण है। अब यह बहुत अधिक सामान्य है और आपकी खिड़की के आकार के आधार पर, आपको क्यूब्स की सही संख्या मिल जाएगी। यह अभी भी दूर सही किया जा रहा है (आप एक बेहतर गहराई भावना प्राप्त करने के लिए क्यूब्स के आकार के साथ खेल सकते) से है, लेकिन सामान्य रूप में आप देखते हैं कि यह संभव है, यहां तक ​​कि गतिशील रूप से :) यहाँ बेला है: http://jsfiddle.net/P84qd/4/

जावास्क्रिप्ट के विवरण में एक छोटे से जाना करने के लिए:

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 समारोह एक सरल कार्य है जो बराबर मार्जिन (ऊपर, बाएँ, दाएँ, नीचे) के साथ अपने वेब पेज पर वर्गों वितरित करेंगे है। मैंने इसे 1 से लिया। dlt फ़ंक्शन कॉलम की संख्या की गणना करता है और प्रत्येक कॉलम के लिए रोटेशन राशि को परिभाषित करता है (मेरे उदाहरण में अधिकतम रोटेशन मान 40 है)। बाकी कोड सही तरीके से काम करने के लिए पूरी तरह से कुछ गणित जांच हैं।

बेहतर परिणाम प्राप्त करने के लिए, आपको प्रत्येक वर्ग के आकार के साथ खेलना चाहिए, लेकिन सावधान रहें क्योंकि dispatch फ़ंक्शन को वर्ग के आकार को भी जानने की आवश्यकता है ताकि गणना की जा सके कि कितने वर्ग प्रति प्रदर्शित किए जाने की अनुमति होगी पंक्ति। मैं आपको इसके साथ मजा करने दूंगा;)