css3旋轉頂部和左邊座標

我有一個2格 - 父母和孩子。兒童是position:absolutecss3旋轉頂部和左邊座標

HTML：

<div id="parent"> 
    <div id="child"> 
     some text 
    </div> 
</div>

CSS

#parent {position:relative; border:1px solid #000; width:200px; height:100px} 
#child {position:absolute; top:0; left:0; background-color:maroon; opacity:0.5; width:150px; height:50px; border:1px solid #000}

我加入的的jsfiddle幾個元素，使變化的頂部和左側座標。
http://jsfiddle.net/zgvEC/1/

我所面臨的問題是 -

當孩子的div旋轉90度或270度，則元素沒有被定位於母公司div的左上角。子div的寬度/高度可以是任意的。如果孩子div的寬度可以放在父母的身高中，那麼沒有頂部和左側位置的問題。我準備在這裏做數學，但不知道要考慮什麼。
當我拖動子div時，它的位置變爲右上角。

請讓我知道是否有任何幫助。萬分感謝！！

來源

2013-11-22 Ashwin

當您旋轉時，您是否試圖始終將父母的左上角保留在父母的左上角？ –

首先，你需要旋轉的原點設置爲左上角和旋轉，

$("#child").css({ 
      "-webkit-transform-origin": "top left", 
      "-moz-transform-origin": "top left", 
      "-o-transform-origin": "top left", 
      "transform-origin": "top left", 
      "transform" : "rotate("+ angle +"deg)" 
     });

這將繞其元素（頂部，左側）點。

但正如你在你的案例中所描述的那樣，你需要div始終處於頂端，而你需要用div的邊界做一些數學運算。

您可以使用document.getElementById(ele).getBoundingClientRect();

然後你需要前，它被旋轉後得到div的邊界得到的邊界。根據當前角度應用數學邏輯。在這裏找到代碼供您參考。

$(function(){ 
    $("#child").draggable(); 
    var angle = 0; 
    $("#btn1").click(function(){ 
     angle = angle + 90; 
     if(angle == 360) { angle = 0 } 
     // reset top left position to (0,0) 
     $("#child").css({"top": "0px", "left": "0px"}); 
     var preBounds = getBounds("child"); 
     $("#child").css({ 
      "-webkit-transform-origin": "top left", 
      "-moz-transform-origin": "top left", 
      "-o-transform-origin": "top left", 
      "transform-origin": "top left", 
      "transform" : "rotate("+ angle +"deg)" 
     }); 
     var currBounds = getBounds("child"); 

     if(angle == 90) 
     { 
     $("#child").css({ "left": currBounds.left+Number(preBounds.left-currBounds.left)+"px"}); 
     } 
     else if(angle == 180) 
     { 
     $("#child").css({ "top": currBounds.top+Number(preBounds.top-currBounds.top)+"px","left":currBounds.width+"px"}); 
     } 
     else if(angle == 270) 
     { 
     $("#child").css({ "top": currBounds.height+"px"}); 
     } 
    }); 


}); 

function getBounds(ele){ 
    var bounds = document.getElementById(ele).getBoundingClientRect(); 
    console.log(bounds); 
    //{left:bounds.left, top:bounds.top, right:bounds.right, bottom:bounds.bottom} 
    return bounds; 
}

檢查相同的fiddle。希望它有幫助

來源

2013-11-22 07:28:29

謝謝。但在你的小提琴中，我發現越來越高的地方它不起作用。這是從左邊框出來的。 – Ashwin

我已經添加了一些代碼給你的jsfiddel。

這裏有一個工作環節：Fiddle

爲了得到正確的座標，你必須檢查x和y的子元素的偏移：

top = $(this).css('top'); 
left = $(this).css('left');

但要獲得職位的權利，同時旋轉，你也必須使用元素的寬度和高度。所以我設置的頂部和左側值，就像這樣：

top = parseInt($("#child").css('top').replace('px','')) + (middlePointX - middlePointY); 
left = parseInt($("#child").css('left').replace('px','')) + (middlePointY - middlePointX);

來源

2013-11-22 07:05:42

css3旋轉頂部和左邊座標

回答

相關問題