Rotate text

dabblet.css

/**
 * Rotate text
 */

body {    
	background: #f06;    
	background: linear-gradient(45deg, #f06, yellow);    
	min-height: 100%;
}
.rotateObj {    
	height: 150px;
}

.rotateObj h2 {    
	position: relative;    
	float: left;    
	background: gray;    
	width: 50px;    
	height: 100%;    
	border-radius: 5px;    
}

.rotateObj h2 span {    
	width: 150px;    
	display: inline-block;    
	position: absolute;    
	left: -50px;    
	transform: rotate(-90deg);
}

.rotateObj h2.active {    
	background: green;
}

.rotateObj .content {    
	float: left;    
	width: 250px;    
	height: 100%;    
	padding: 20px;
}

dabblet.html

<div class="wrapper">    
 	<div class="rotateObj">      
 		<h2 class="active">
 			<span>First titledasdfasdfasdfasdfasdfasdfasdf</span>
 		</h2>      
 		<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor        incididunt ut labore et dolore magna aliqua it amet, consectetur adipisicing        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquait amet,        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et        dolore magna aliqua      </div>      
 		<h2>
 			<span>Second title</span>
 		</h2>      
 		<div class="content">        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor        incididunt ut labore et dolore magna aliqua      </div>    
 	</div>  
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}