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