transform:rotate not working in IE with a masterpage

Question

I have this HTML div in a aspx file:

<div name='drawingline' style='height: 27.459060435491963px;
     width: 2px; background-color: black; 
     position: absolute; top: 10px;
     left: 805px; 
     transform: rotate(30deg); -ms-transform: rotate(30deg);
     transform-origin: 0% 0%; -moz-transform: rotate(30deg); -moz-transform-origin: 0% 0%;
     -webkit-transform: rotate(30deg); -webkit-transform-origin: 0% 0%;
     -o-transform: rotate(30deg); -o-transform-origin: 0% 0%;'>
</div>

It's working on all browsers but another aspx page with: MasterPageFile="~/MasterPage.master" and the same div is not working on IE

Answer 1

I would suggest to use a class instead, it will help you debug better your CSS. In your code snippet the -ms-transform-origin: 0% 0%; is missing. Maybe this resolves your issue.

For example: CSS

.drawing_line
{
height: 27.459060435491963px;
width: 2px; 
background-color: black; 
position: absolute; 
top:10px;
left: 805px; 
transform: rotate(30deg); 
-ms-transform: rotate(30deg);
-moz-transform: rotate(30deg); 
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg); 

transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;    //This was missing
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
}

HTML:

<div class="drawing_line">
</div>

I checked the css above and it works in IE11, and also in 9 and 10 by changing the document mode.