Get actual pixel coordinates of div after CSS3 transform

Question

Is it possible to get the four actual corner coordinates of a

that has been transformed with CSS3 attributes like scale, skew

Answer 1

I don't think that there is API for that. As well as there is no API to convert coordinates in HTML5 . But there is a way to calculate coordinates manually. Here is a class from my library which converts coordinates: https://github.com/enepomnyaschih/jwcanvas/blob/master/jwidget/public/jwcanvas/transform.js

You can use it as a template.

To initialize coordinate system, you should just instantiate an object of JW.Canvas.Transform class and apply method complex. After that, you can apply other transformations to coordinate system via transform method. Matrixes are:

• translate: [1, 0, 0, 1, x, y]
• scale: [x, 0, 0, y, 0, 0]
• rotate clockwise: [cos(a), sin(a), -sin(a), cos(a), 0, 0]
• skew along x: [1, 0, tan(a), 1, 0, 0]
• skew along y: [1, tan(a), 0, 1, 0, 0]

After that, you'll be able to convert coordinates via convert method. Use back method to calculate backwards convertion object.