JSFiddle - React, Tailwind, and code Playground
HTML
</BR></BR>
Rotated 270:
<div class="rot270"> [270] </div>
</BR></BR>
Rotated 90:
<div class="rot90"> [90] </div>
</BR></BR>
Rotated 270b:
<div class="rot270b"> [270b] </div>
</BR></BR>
Rotated 90b:
<div class="rot90b"> [90b] </div>
CSS
.rot90b {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand')";
-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;
}
.rot270b {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand')";
-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;
}
.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);
...