問題描述
在應用 rotate 過濾器后，我在獲取 div 的位置時遇到問題.我有一端的位置、它的高度和旋轉的角度，但是在檢查了這個過濾器在 MDN 上的實際作用之后 ("[cos(angle) sin(angle) -sin(angle) cos(angle)0 0]") 我還是不知道怎么破解.
I'm having a problem with getting the position of a div after rotate filter is applied to it. I have the position of one end, its height, and the angle by which it is rotated, but after checking what this filter actually does on MDN ("[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]") I still don't know how to crack it.
例子:
我感興趣的 div 是虛線.它當時的造型是:
The div I'm interested in is the dashed line. Its styling at that moment was :
左:80px；頂部:12px；高度:69.5122px；寬度:2px；-moz-transform: 旋轉(-1.21366rad);
(top/left 描述它開始的位置.) 我正在嘗試獲取 top/left 結束位置.
(top/left describe the position of its beginning.) I'm trying to get the top/left position of its end.
推薦答案
根據您當前的問題和您要求的確認:
Per your current Question and your requested confirmation of:
var x = termin.top + Math.cos(angle) * div.height;
var y = div.left + Math.sin(angle) * div.height;
解決方案可以在其他 SO 答案中找到不同的問題，在此增強:
The solution can be found in this other SO Answer for a different question, enhanced here:
// return an object with full width/height (including borders), top/bottom coordinates
var getPositionData = function(el) {
return $.extend({
width: el.outerWidth(false),
height: el.outerHeight(false)
}, el.offset());
};
// get rotated dimensions
var transformedDimensions = function(el, angle) {
var dimensions = getPositionData(el);
return {
width: dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)),
height: dimensions.height + Math.ceil(dimensions.height * Math.cos(angle))
};
};
這是一個 interactive jsFiddle，它為 getPositionData(); 函數提供實時更新.
您將能夠看到top 和 left 值位于您控制的 CSS3 旋轉 進程的末尾.
Here's an interactive jsFiddle that provides real-time updates for getPositionData(); function.
You'll be able to see the top and left values at the end of the CSS3 Rotation process you control.
參考: jsFiddle
Reference: jsFiddle
狀態更新: 上面的 jsFiddle 適用于 0-90deg 并且可以被批準用于所有角度和不同的單位，例如 rad、grad 和 turn.
Status Update: The above jsFiddle works great for 0-90deg and can be approved upon for all angles and different units such as rad, grad, and turn.
這篇關于如何獲得用css旋轉轉換的元素的位置的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！