Текст развёрнут вертикально с помощью CSS

Сниппет CSS: Расположение текста вертикально, трансформация на угол 90̊ .

HTML

<div class="vertical-text">Вертикальный текст это просто! &rarr;</div>

CSS

.vertical-text {
    
 /* Трансформируем текст */    
transform: rotate(90deg);    
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(-90deg);
    
/* Координаты точки трансформации */    
transform-origin: left top 0;  
-ms-transform-origin: left top 0;
-moz-transform-origin: left top 0;
-webkit-transform-origin: left top 0;
    
 /* Формируем контейнер для текста */    
background:#196e76;
border:0.25em solid #196e76;
box-shadow:inset 0.25em -0.25em 0.5em rgba(0,0,0,0.3), 0.25em -0.25em 0 #444; 
margin-left: 42px;    
padding: 10px;
    
/* Стили для  текста */    
color: #fff;
text-transform: uppercase;
text-transform: 1px 1px 0px rgba(0, 0, 0, 0.5);
float: left;
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;    
letter-spacing: .01rem;
font-size: 20px;
line-height: 1;
}