发新贴  快速回复

TweenMax 折纸作业,折叠效果链接有缝隙

  Dimple
2017-11-13 16:34
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>折纸效果</title>
	<style>
		div{margin: 0;padding: 0; width: 400px;height:50px;background: pink;border: 1px solid black;margin: 0 auto;margin-top: 50px;}
	}
	</style>

</head>
<body>
<script src="TweenMax.min.js"></script>
<script>
	var starhtml='';
	var endhtml='';
	for(var i=0;i<10;i++){
		starhtml+='<div>';
		endhtml+='</div>';
	}
	document.body.innerHTML+=starhtml+endhtml;

	var t = new TimelineMax();
	// 无运动效果,直接位移到400这个位置
	t.set( "div",{
		transformPerspective:400,transformOrigin:"top",
		rotationX :-90,
	} )


	t.staggerTo( "div",1,{
		rotationX :0,
	},0.5);


</script>
</body>
</html>

 



	

明明设置了旋转中心是顶部,但是做出来的效果,好像旋转中心是图形的中心,不知道哪里搞错了

登录 后才可以发表回复