如何获得用css旋转转换的元素的位置

问题描述

在应用 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模板网！