Having difficulties achieving text rotation that works smoothly in both Chrome and IE (11.0). The issue is that in IE, the text rotates 180 or 360 degrees instead of the desired 90 or 270 degrees.
Here are the CSS styles I have experimented with:
.rot90 {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
transform-origin: 0px 0px;
border: 0px solid;
white-space: nowrap;
position:absolute;
display:inline-block;
padding-bottom: 5px;
writing-mode: tb-rl;
}
.rot270 {
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-ms-transform:rotate(270deg);
-o-transform:rotate(270deg);
transform:rotate(270deg);
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
transform-origin: 0px 0px;
border: 0px solid;
white-space: nowrap;
position:absolute;
display:inline-block;
padding-bottom: 5px;
writing-mode: tb-rl;
}
The requirement is for the transform origin to be set at: 0px 0px.
Explore this jsfiddle link for visual demonstration:
Alternatively, check out this jsfiddle using the helpful CSS Matrix Rotation Calculator:
UPDATE
A functional solution based on the selected answer can be found here, highlighting how the 'writing-mode' property had a significant impact on the outcome: https://jsfiddle.net/wonc4px9/6/
.rot90 {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand');
-moz-transform: matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);
-webkit-transform: matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);
-o-transform: matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);
-ms-transform: rotate(90deg);
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
transform-origin: 0px 0px;
border: 0px solid;
white-space: nowrap;
position:absolute;
display:inline-block;
padding-bottom: 5px;
}
.rot270 {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand');
-moz-transform: matrix(-0.00000000, -1.00000000, 1.00000000, -0.00000000, 0, 0);
-webkit-transform: matrix(-0.00000000, -1.00000000, 1.00000000, -0.00000000, 0, 0);
-o-transform: matrix(-0.00000000, -1.00000000, 1.00000000, -0.00000000, 0, 0);
-ms-transform: rotate(270deg);
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
transform-origin: 0px 0px;
border: 0px solid;
white-space: nowrap;
position:absolute;
display:inline-block;
padding-bottom: 5px;
}