根据浏览器窗口大小旋转div

我可以使用我在下面制作的方法创建玻璃效果，并将其应用于包含宽度和高度均为100％的div？这意味着无论您如何调整窗口大小，玻璃div的边角都会随窗口一起移动。根据浏览器窗口大小旋转div

<!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>

来源

2012-04-25 Ryan

This fiddle我觉得你想要什么。我在一个定时器上设置了resize事件，所以它不会立即在调整大小后立即执行。如果它很重要，你可以改变它，但是它不会使用太多的处理能力来仅仅经常检查调整大小。

下面的代码（HTML，你有以上）：

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(); 
});

来源

2012-04-25 17:04:14 ScottS

根据浏览器窗口大小旋转div

回答

相关问题