Untitled

dabblet.css

* {
	position: relative;
	box-sizing: border-box;
 	margin: 0;
  	padding: 0;
  	}

html {
	background: white;
	}

body {
	background: #222;
	text-align: center;
	overflow: hidden;
	}

.container {
  	display: inline-block;
  	transform-origin: 50% 50%;
  	margin-top: -50%;
	transform: rotate(-90deg) translateX(-50%);
  	border: 3px solid red;
	}

dabblet.html

<div class='container'></div>

dabblet.js

var supportsOrientationChange = 'onorientationchange' in window, orientationEvent = supportsOrientationChange ? 'orientationchange' : 'resize';

var $container = document.getElementsByClassName('container')[0];

$container.style.width = window.innerHeight + 'px';
$container.style.height = window.innerWidth + 'px';

window.addEventListener(orientationEvent, function() {
    $container.style.width = window.innerHeight + 'px';
    $container.style.height = window.innerWidth + 'px';
}, false);

settings.json

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