9

CSSでDLTを実行することは可能ですか？もしそうなら、これはどのように達成されますか？私はただを使用する方法を考えることができませんtransform: matrix...これが不可能な場合、代替アプローチは何でしょうか？

私が達成しようとしている特定の効果は、Safariがこれを行う方法と同様の方法でdivをレイアウトすることです。ここに画像の説明を入力してください

4

1 に答える 1

1

これは、あなたの要求に対する非常に大雑把で非一般的な回答です。http://jsfiddle.net/3t5SM/ 簡単に拡張して、より優れた一般的なソリューションを得ることができます。

私のCSSでは、

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

基本的な考え方は、列ごとにスタイルを作成することです (ここでは ID を呼び出していますが、列ごとにスタイルを設定し、列を.left、.middle、.rightなどとして定義することをお勧めします)。

詳細に入る時間があれば、今夜投稿を更新します:)

編集: 約束どおり、これは少し優れたバージョンです。今ではより一般的になり、ウィンドウのサイズに応じて適切な数の立方体が得られます。それはまだ完全にはほど遠いです (より良い奥行き感を得るために立方体のサイズをいじることができます) が、一般的に、動的であってもそれが可能であることがわかります:) ここにフィドルがあります: http:// jsfiddle.net/P84qd/4/

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

このdispatch関数は、Web ページ上の正方形を均等な余白 (上、左、右、下) に配置する単純な関数です。1から取りました。関数は列のdlt数を計算し、各列の回転量を定義します (私の例では、最大回転値は 40 です)。コードの残りの部分は、正しく機能させるための純粋な数学チェックです。

より良い結果を得るには、各正方形のサイズを調整する必要がありますが、dispatch関数は、行ごとに表示できる正方形の数を計算するために正方形のサイズも知る必要があるため、注意してください。楽しんでもらいます ;) </p>

于 2012-11-16T15:52:21.850 に答える