# How to get the position of element transformed with css rotate

## Problem

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.

Example :

The div I'm interested in is the dashed line. Its styling at that moment was :

`left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad);`

(`top`

/`left`

describe the position of its beginning.) I'm trying to get the `top`

/`left`

position of its end.

## Solution

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;
```

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))
};
};
```

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.

**Reference:** **jsFiddle**

**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**.

## Discussion

View additional discussion.

*This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here*