HomeJavascript › Javascript and CSS3 Fun – Rotating the Screen

Javascript and CSS3 Fun – Rotating the Screen

Info for Nerds (ie: How to rotate the browser’s display)

See http://dotslash.ca/javascript-fun-what-my-browser-looks-like-on-a-boat/ for the example/demo.


Through the magic of CSS2 and some basic Javascript, this is actually pretty simple! Here’s the basic description of the code:

  1. Set up a global variable for the document body’s style element, as well as for a few other things like "angle"
  2. Check to see if we’re on the page that is only showing this post so we don’t mess up the home page when a blurb of this page is shown. (I just did it a quick and dirty way by checking if the page’s title matches this page’s title)
  3. Increase the angle but a small random amount, and if the angle is more than twice PI (in Radians) subract twice PI
  4. Use the sine of the angle divided by a somewhat arbitrary factor to adjust the CSS3 transform’s "rotate()" parameter. (If I didn’t divided it down by the factor it would spin all the way around, just like Google search does when you type “do a barrel roll” in the search!)
  5. Set a timer to do it again in a moment

The Code

<script lang="javascript">
var pi = Math.PI;
var timer;
var factor = 20;
var angle = 0;
var docBody = document.getElementsByTagName("body")[0];
var s = docBody.style;
function stopTimer()
{
    clearTimeout(timer);
    document.getElementById('stopTimerButton').style.display = "none";
    document.getElementById('straightenUp').style.display = "block";
}
function rollit()
{
    angle += Math.random() / 5;
    if (angle > pi)
    {
        angle -= (2 * pi);
    }
    s.transform = "rotate(" + (Math.sin(angle) / factor) + "rad)";
    timer = setTimeout("rollit()", 35);
}
if (document.title.indexOf('Javascript fun') === -1)
{
    document.getElementById("viewThisPost").style.display = "block";
    document.getElementById("stopTimerButton").style.display = "none";
}
else
{
    s.transform = "rotate(" + angle + "rad)";
    rollit();
}
</script>

I haven’t tested this on any browsers other than Firefox… but it’s pretty cool, huh?

This post was written by

– who has written 17 posts on DotSlash.ca.
Plain old nerd.

Email  • Google + • Facebook

Share Button

2 Comments.[ Leave a comment ]

  1. What’s up, everything is going sound here and ofcourse every one
    is sharing data, that’s in fact good, keep up writing.

  2. Hello! I could have sworrn I’ve been too this website before but after looking at many of the
    posts I realized it’s new to me. Anyhow, I’m definityely happy I found
    it and I’ll be bookmarking it and checkng back regularly!

Reply to tutaj ¬
Cancel reply

NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>