Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Better Screen rotation

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.

.wrapper
.phone
.screen
%button.rotate ↻ Rotate
%button.toggle-overlay Toggle overlay
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);
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
$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; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment