0

Some size specified, position: absolute and css transformation is used as well for rotate html element .my-square. The goal is to calculate image map cords for this div instead of having absolute pos + css transformation. Is it possible? Any ideas are very welcome.

.my-square {
    width:150px;
    height:150px;
    background-color:red;    
    position:absolute;
    transform:matrix(0.650718, 0.759319, -0.759319, 0.650718, 0, 0);
    top:150px;
    left:150px;
    transform-origin:50% 50% 0;
}

Full example: http://jsfiddle.net/KbbwZ/

Cœur
  • 37,241
  • 25
  • 195
  • 267
Faustas Misiunas
  • 91
  • 1
  • 5
  • Can you please explain what you want to achieve in the end? And for your example a simple `transform: rotate(45deg);` would be sufficient. And what about the "image map" you are talking about? Sorry, but it is not clear to me. – Netsurfer Sep 15 '13 at 10:19
  • All this css is generated by some html drag&drop editor. As result I have some html with a lot of html elements with absolute position and some of them are rotated. I'm generating print-screen of that html later on and the goal is to generate with some elements and add some links for these element which is captured and I have image (print-screen) of them. Smth like that: http://www.december.com/html/demo/imagemap.html – Faustas Misiunas Sep 15 '13 at 10:39
  • OK, now things become a little clearer to me ...! Are the rotated elements all squares, or do you have different shapes? So in the end you are looking for a Javascript solution to generate an image map - right? Would it be OK fpr you to use a JS framework like jQuery? – Netsurfer Sep 15 '13 at 10:46
  • Yes only elements which are squares. I'm using jQuery already very heavy - code is more readable and so on so no problem with that. "you are looking for a Javascript solution to generate an image map - right" - exactly. – Faustas Misiunas Sep 15 '13 at 12:31
  • So you would have to read the given style information, and then calculate the coordinates the positioning, element dimensions and applied transformation actually result in … `getBoundingClientRect` will get different results for the element position whether or not the transformation is applied, so that could be a starting point. – CBroe Sep 15 '13 at 12:53
  • @Faustas Misiunas: Have you seen [**Getting new coordinates after a Rotation**](http://stackoverflow.com/questions/581837/wpf-getting-new-coordinates-after-a-rotation)? Maybe it helps to find a formula for the calculation? – Netsurfer Sep 15 '13 at 13:10

0 Answers0