Better Screen rotation

Better Screen rotation.markdown

Better Screen rotation

Something I think is an improvement over how iOS does screen orientation changes for wallpapers, for instance. No flashes of black letterboxing.

Note that background-attachment property with transform: rotate(); doesn't quite work in Chrome at least.

Photo by Chris Burkard.

A Pen by Bennett Feely on CodePen.

License.

index.html

.wrapper
	.phone
		.screen
		
%button.rotate ↻ Rotate
%button.toggle-overlay Toggle overlay

script.js

i = 0;
$(".rotate").mousedown(function(){
	i++;
	
	if(i == 1) { $("body").attr("class", "right"); }
	if(i == 2) { $("body").attr("class", "left") ;}
	if(i == 3) { 
		$("body").removeAttr("class");
		i = 0;
	}
	
	console.log("style: " + i);
});

$(".toggle-overlay").click(function(){
	$(".wrapper").toggleClass("show-overlay");
});

setTimeout(function() {
	$("body").attr("class", "right");

	setTimeout(function() {
		$("body").attr("class", "left");
		
		setTimeout(function() {
			$("body").removeAttr("class");
		}, 1800);
	}, 1800);
}, 1800);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$ratio : 9/16;
$size : 62vmin;
$duration : 1s;
$background-color : lightgray;
$phone-color : white;
$background-image : "https://drscdn.500px.org/photo/84448705/m%3D2048/9a72bfdf723fca8a09c52524f0bef804";

%center {
	display: flex;
	justify-content: center;
	align-items: center;
}

%psuedo {
	display: block;
	position: absolute;
	content: "";
}

@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:400,300,500);

* {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	@extend %center;
	position: relative;
	height: 100vh;
	background: $background-color;
}

.wrapper {
	@extend %center;
	width: $size + $size/4;
	height: $size + $size/4;
	background: url($background-image);
	background-size: cover;
	border-radius: 50%;
}

.phone {
	position: relative;
	border: solid $phone-color;
	border-width: $size/8 $size/50; 
	box-shadow: 0 0 0 $size rgba($background-color, 1);
	border-radius: $size/15;
	transition: transform $duration;
	
	&:before, &:after {
		@extend %psuedo;
		background: rgba(gray, .2);
		border-radius: $size;
	}
	
	&:before {
		width: $size/10;
		height: $size/10;
		top: 100.5%;
		left: $size/4.333;
	}
	
	&:after {
		width: $size/8;
		height: $size/50;
		top: -$size/16;
		left: $size/4.5;
	}
	
	.show-overlay & { 
		box-shadow: 0 0 0 $size rgba($background-color, .75);
	}
	
	.right & { transform: rotate3d(0,0,1,90deg); }
	.bottom & { transform: rotate3d(0,0,1,180deg); }
	.left & { transform: rotate3d(0,0,1,-90deg); }
}

.screen {
	position: relative;
	width: $size * $ratio;
	height: $size;
	border-radius: 10px;
	
	&:after {
		@extend %psuedo;
		top: -2px;
		left: -2px;
		right: -2px;
		bottom: -2px;
		border: 5px solid $phone-color;
		border-radius: 8px;
	}
}

button {
	display: inline-block;
	font-family: Alegreya Sans, sans-serif;
	position: fixed;
	top: 10px;
	font-size: 16px;
	background: white;
	border-radius: 200px;
	padding: 6px 12px;
	cursor: pointer;
	user-select: none;
	
	&.rotate { left: 10px; }
	&.toggle-overlay { right: 10px; }
	
	&:hover { 
		background: black;
		color: $background-color;
	}
	&:active { opacity: .5; }
	&:focus { outline: 0; }
}