滚筒效果

2021-06-30 11:52:26 作者：互联网

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	#wrap{width: 320px;border: 1px solid #999;margin: 20px auto;}
	#wrap div{width: 100%;height: 40px;text-align: center;border-bottom: 1px solid lightgray;background: cyan;
	transform: rotateX(90deg);
	transition:all 1s cubic-bezier(1, 1.75, 0.88,-0.08);
	transform-origin: top;
	}
	span{display: block;line-height: 40px;}

	/#wrap:hover div{transform: rotateX(0);}/

	</style>
	</head>
	<body>
	<div id="wrap">
	<div><span>sapn1</span></div>
	<div><span>sapn2</span></div>
	<div><span>sapn3</span></div>
	<div><span>sapn4</span></div>
	<div><span>sapn5</span></div>
	<div><span>sapn6</span></div>
	<div><span>sapn7</span></div>
	<div><span>sapn8</span></div>
	<div><span>sapn9</span></div>
	<div><span>sapn10</span></div>
	<div><span>sapn11</span></div>
	<div><span>sapn12</span></div>
	</div>
	</body>
	<script type="text/javascript">
	var wrap = document.getElementById('wrap');
	var divs = wrap.getElementsByTagName('div');

	wrap.onclick = function(){
	for (var i = 0; i < divs.length; i++) {
	divs[i].style.transform = 'rotateX(0)';
	divs[i].style.transitionDelay = i*0.3 + 's';
	}
	}


	</script>
	</html>

标签：效果,transform,rotateX,var,wrap,div,divs,滚筒
来源： https://blog.51cto.com/u_15283585/2957258