コメント：この記事では、主に、チーターブラウザをインストールする際のユーザーの指示と同様に、HTML5メニューの折り紙効果を紹介します。それを必要とする友達はそれを参照できます
チーターブラウザをインストールするときのユーザーの指示に似ています。
クリック後の効果<！doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> gt-ke leyiによる折りたたみ紙効果</title>
<style>
#wrapper {
-webkit-perspect：55cm;
-Webkit-Perspection-Origin：50％50％;
テキストアライグ：センター;
}
。紙 {
位置：相対;
高さ：40px;
幅：5em;
マージン：0;
背景色：アクア;
-webkit-transition：-webkit-transform 1s linear;
}
</style>
<script type = "text/javascript">
window.angel = 0;
window.timer;
function folder（）{
var foldup = document.getElementById（ "foldup"）;
var folddown = document.getElementById（ "folddown"）;
var down = document.getElementById（ "down"）;
if（window.angel == 0）{
window.timer = setInterval（function（）{
var diff =異なる（-1、20）;
console.log（foldup.offsettop）
移動（foldup、diff、1）;
移動（folddown、diff、3）;
移動（下、diff、4）;
}、40）;
setimeout（function（）{
ClearInterval（window.timer）;
foldup.style.top = "-20px";
folddown.style.top = "-60px";
down.style.top = "-80px";
window.angel = -90;
}、1030）;
foldup.style.webkittransform = "rotatex（-90deg）";
folddown.style.webkittransform = "rotatex（90deg）";
} else if（angel == -90）{
window.timer = setInterval（function（）{
var diff = different（1、20）;
console.log（foldup.offsettop）
移動（foldup、diff、1）;
移動（folddown、diff、3）;
移動（下、diff、4）;
}、40）;
setimeout（function（）{
ClearInterval（window.timer）;
foldup.style.top = "0";
folddown.style.top = "0";
down.style.top = "0";
window.angel = 0;
}、1030）;
foldup.style.webkittransform = "rotatex（0deg）";
folddown.style.webkittransform = "rotatex（0deg）";
} それ以外 {
console.log（window.angel）
}
}
function positionValue（div、type）{// cssの単位で値を取得します
var str = div.style [type];
str = str.substring（0、str.length -2）;
var値= parseint（str）;
if（isnan（value））{
値= 0;
}
返品値。
}
関数移動（div、違う、時間）{
var top = positionValue（div、 "top"）;
div.style.top = top + different * time + "px";
}
関数が異なる（方向、高さ）{
var lastangel = window.angel;
window.angel += 3.6 *方向;
var Different = Math
.ceil（（math.cos（window.angel / 180 * math.pi）-math
.cos（lastangel / 180 * math.pi））
*高さ * 100） / 100;
違う返品;
}
</script>
</head>
<body>
<div>
<div>
g
</div>
<div>
n
</div>
<div>
b
</div>
<div>
t
</div>
</div>
<ボタンonclick = fold（）;>
折り畳み
</button>
</body>
</html>