4

デフォルトでは、cssrotateプロパティはタグの間隔の後に発生するようです。たとえば、1つの列に2つのdivがあり、1つを回転させると、それらはオーバーラップします。この問題を処理するcssまたはhtmlのいくつかの側面を完全に見逃した可能性がありますか？

明らかな解決策は、回転後の要素の配置を管理するためのJavaScriptを作成することのようです。この間隔を処理するのに役立つプラグインはありますか？私が見つけた唯一の近くのものはjquery-rotateプラグでしたが、間隔に関しては機能を提供していないようです。

間隔の問題を示す関連するhtml/css。

HTML

<div class="red-box rotate-right"></div>
<div class="blue-box"></div>​

CSS

.rotate-right {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.red-box{
  height: 50px;
  width: 100px;
  background: red;
}

.blue-box{
  height: 50px;
  width: 100px;
  background: blue;
}
4

1 に答える 1

2

了解しました。これは見苦しいことに注意してください。

まず、CSS-Tricksのコードを使用して回転角を取得しました。次に、代数を使用して、要素を含むボックスの側面までの距離（回転した要素の中心から）を見つけます。次に、回転した要素のエッジにマージンを追加して、必要に応じて余分なスペースを作成（または削除）します。これには、元のマージン（ある場合）も考慮されます。

使用法：

要素を回転させた後、を呼び出します$(rotatedElement).space([grow],[shrink])。引数の説明については、コードコメントを参照してください。

jQuery.fn.space = function(grow,shrink){
    // grow = Grow area around element to fit? (true/false)
    // shrink = Shrink area around element to fit? (true/false)
    var el = this.get(0);
    if(typeof(grow)=='undefined'){
        grow = true; // Default to grow extra space when needed
    }
    if(typeof(shrink)=='undefined'){
        shrink = false; // Default to not shrink at all
    }

    //Get angle of rotated element
    var st = window.getComputedStyle(el, null);
    var tr = st.getPropertyValue("-webkit-transform") ||
         st.getPropertyValue("-moz-transform") ||
         st.getPropertyValue("-ms-transform") ||
         st.getPropertyValue("-o-transform") ||
         st.getPropertyValue("transform");
    var v = tr.split('(')[1].split(')')[0].split(',');
    var scale = Math.sqrt(v[0]*v[0] + v[1]*v[1]);
    var angle = Math.round(Math.atan2(v[1], v[0]) * (180/Math.PI));

    //Save or recall original margins
    var m = new Array();
    if(el.getAttribute('margins')==null){
        m[0] = st.getPropertyValue("margin-left").match(/\d+/);
        m[1] = st.getPropertyValue("margin-right").match(/\d+/);
        m[2] = st.getPropertyValue("margin-top").match(/\d+/);
        m[3] = st.getPropertyValue("margin-bottom").match(/\d+/);
        el.setAttribute('margins',m[0]+","+m[1]+","+m[2]+","+m[3]);
    } else {
        m = el.getAttribute('margins').split(',');
        console.log(m);
    }
    //Get center coords
    var cx = st.getPropertyValue("width").match(/\d+/)/2;
    var cy = st.getPropertyValue("height").match(/\d+/)/2;

    //Convert radian values to degrees
    function toDeg(angle){
        return angle*Math.PI/180;
    }

    // Coords of the corners
    // (starting from top-left and proceeding clockwise)
    // relative to the center of the element
    // c[cornerID][x|y]
    var c = [ [Math.round(cx*Math.cos(toDeg(angle-180))
                 + cy*Math.cos(toDeg(angle-90))),
               Math.round(cx*Math.sin(toDeg(angle-180))
                 + cy*Math.sin(toDeg(angle-90)))],

              [Math.round(cx*Math.cos(toDeg(angle))
                 + cy*Math.cos(toDeg(angle-90))),
               Math.round(cx*Math.sin(toDeg(angle))
                 + cy*Math.sin(toDeg(angle-90)))],

              [Math.round(cx*Math.cos(toDeg(angle))
                 + cy*Math.cos(toDeg(angle+90))),
               Math.round(cx*Math.sin(toDeg(angle))
                 + cy*Math.sin(toDeg(angle+90)))],

              [Math.round(cx*Math.cos(toDeg(angle-180))
                 + cy*Math.cos(toDeg(angle+90))),
               Math.round(cx*Math.sin(toDeg(angle-180))
                 + cy*Math.sin(toDeg(angle+90)))]
            ];

    var elx = ([c[0][0], c[1][0], c[2][0], c[3][0]]).sort(function(a,b){
                                                          return(a*1)-(b*1);});
    var ely = ([c[0][1], c[1][1], c[2][1], c[3][1]]).sort(function(a,b){
                                                          return(a*1)-(b*1);});

    var b = [-elx[0], elx[3], -ely[0], ely[3]]; // [Left, Right, Top, Bottom]

    if(grow){
        if(b[0]-cx>0) el.style.marginLeft = (m[0] + b[0]-cx) + "px";
        if(b[1]-cx>0) el.style.marginRight = (m[1] + b[1]-cx) + "px";
    /*}
    if(growY){ */
        if(b[2]-cy>0) el.style.marginTop = (m[2] + b[2]-cy) + "px";
        if(b[3]-cy>0) el.style.marginBottom = (m[3] + b[3]-cy) + "px";
    }
    if(shrink){
        if(b[0]-cx<0) el.style.marginLeft = (m[0] + b[0]-cx) + "px";
        if(b[1]-cx<0) el.style.marginRight = (m[1] + b[1]-cx) + "px";
    /*}
    if(shrinkY){ */
        if(b[2]-cy<0) el.style.marginTop = (m[2] + b[2]-cy) + "px";
        if(b[3]-cy<0) el.style.marginBottom = (m[3] + b[3]-cy) + "px";
    }

}

ライブサイトで何が起こっているかに応じて、（growとshrink）を（growX、growYとshrinkX、 ）に分割して、レイアウトを壊さないようにすることをお勧めします。shrinkYこれを行うには、上部に引数とデフォルトを調整/追加し、下部にif(grow)/if(shrink)ステートメントを追加します。

于 2012-11-02T21:03:06.180 に答える