ブラウザのウィンドウサイズに基づいてdivをローテートする

私が下で作成した方法でガラスエフェクトを作成し、それを幅と高さが100％の包含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をローテートする

答えて

関連する問題