JSFiddle - React, Tailwind, and code Playground

CSS - rotate text - vertical

by Ben Clayton

HTML

<div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Easy</span>          </div>
</div>
<div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Normal with blue bits</span></div>
</div>
<div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Hard</span></div>
</div>

CSS

/** 
* Works everywere ( IE7+, FF, Chrome, Safari, Opera )
* Example: http://jsbin.com/afAQAWA/2/
*/
.rotated-text {
    display: inline-block;
    overflow: hidden;
    width: 1.5em;
    border:1px solid green;
}
.rotated-text__inner {
    display: inline-block;
    white-space: nowrap;
    /* this is for shity "non IE" browsers
       that dosn't support writing-mode */
    -webkit-transform: translate(1.1em,0) rotate(90deg);
       -moz-transform: translate(1.1em,0) rotate(90deg);
         -o-transform: translate(1.1em,0) rotate(90deg);
            transform: translate(1.1em,0) rotate(90deg);
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
   /* IE9+ */
   -ms-transform: none;
   -ms-transform-origin: none;
   /* IE8+ */
   -ms-writing-mode: tb-rl;
   /* IE7 and below */
   *writing-mode: tb-rl;
}
.rotated-text__inner:before {
    content: "";
    float: left;
    margin-top: 100%;
}
 
/* mininless css that used just for this demo */
.container {
  float: left;
}