CODEWITHSUNDEEP
htmlcssrotation
Peter Wirdemo
Peter Wirdemo

Reputation: 526

CSS Cross-browser Text Rotation

I am having problems getting text rotation to work in both Chrome and IE (11.0). In IE the texts rotates 180 and 360 degrees instead of 90 and 270.

This is the CSS-style (among others) I have tested:

.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;
}

I need the transform origin to be at: 0px 0px.

Here is a jsfiddle:

Another jsfiddle using the http://www.boogdesign.com/examples/transforms/matrix-calculator.html

UPDATE

Here is a working solution based on the marked answer, it was the writing-mode that messed things up: 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;
}

Upvotes: 1

Views: 5987

Answers (1)

lunaks
lunaks

Reputation: 136

Try this website to generate a CSS rule for IE.Matrix Calculator

In the answer part it's explained how to use it and why you need it.

It will look like this:

.rot90 {
-ms-filter:"The rule you get from the website"
-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;}

Upvotes: 2

Related Questions