rotate div based on browser window size

Question

Would it be possible for me to create a glass effect using the method I made below and apply it to a containing div that's width and height are 100%? This would mean that no matter how you resize the window, the corners of the glass div always move with the window.

<!DOCTYPE html>
<html lang="en">
<head>

<title>Untitled</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css" media="screen">

body {
    margin: 0;
    padding: 0;
    background: #eee;
}

#container {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 200px;
    margin-left: -250px;
    left: 50%;
    background: #333;
}

#container .glass {
    position: absolute;
    width: 710px;
    height: 710px;
    top: -355px;
    left: -355px;
    background: #fff;
    opacity: 0.1;
    -webkit-transform:rotate(45deg);
}


</style>

</head>
<body>  
<div id="container">
    <div class="glass"></div>
</div>
</body>
</html>

Answer 1

This fiddle I think does what you desire. I set the resize event on a timer, so it does not automatically follow instantly on a resizing. You could change that if it is important, but it helps to not use as much processing power to only check every so often for a resize.

Here's the code (HTML as you have above):

CSS

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: #eee;
    height: 100%;
}

#container {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #333;
    overflow: hidden;
}

#container .glass {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    opacity: 0.1;
    -webkit-transform-origin: 0 100% ;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

Javacript (JQuery)

function glassIt() {

    var g = $(".glass");
    var c = g.parent();
    var w = c.width();
    var h = c.height();
    var ext = ["-webkit-", "-moz-", "-o-", "-ms-"];
    var angle = "rotate("+(-1 * ((Math.atan(h/w))/(2*Math.PI))*360)+"deg)";

    g.width(Math.sqrt(Math.pow(w,2)+Math.pow(h,2)));

    for(i = 0; i <= ext.length; i++) {
        if(i < ext.length) {
            g.css(ext[i]+"transform", angle);
        }
        else {
            g.css("transform", angle);
        }
    }
}

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(glassIt, 100);
});

$(document).ready(function() {
  glassIt();
});

rotate div based on browser window size

Question

1 answers

solution1
0 ACCPTED 2012-04-25 17:04:14

rotate div based on browser window size

Question

1 answers

solution1 0 ACCPTED 2012-04-25 17:04:14

solution1
0 ACCPTED 2012-04-25 17:04:14