我在应用
rotate
过滤器后获取 div 的位置时遇到问题。我有一端的位置、高度和旋转角度,但在 MDN 上检查了这个过滤器的实际作用后(“[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]") 我还是不知道如何破解它。
示例:
我感兴趣的div是虚线。当时它的造型是:
left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad);
(
top
/left
描述其开始的位置。)我正在尝试获取其结束的top
/left
位置。
根据您当前的问题和您要求的确认:
var x = termin.top + Math.cos(angle) * div.height;
var y = div.left + Math.sin(angle) * div.height;
解决方案可以在另一个SO答案中找到,针对一个不同的问题,在这里进行了增强:
// 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();
功能提供
实时更新。
CSS3 Rotation过程结束时看到
top
和 left
值。
参考: jsFiddle
状态更新:上面的jsFiddle适用于0-90deg,并且可以批准所有角度和不同的单位,例如rad、grad和turn。
尝试使用
element.getBoundingClientRect()
根据MDN:
从 Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0) 开始,CSS 变换的效果为 在计算元素的边界矩形时考虑。
您可以尝试使用这个:https://gist.github.com/hoandang/5989980 帮我解决了。