撲克牌.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>撲克牌</title>
<style type="text/css">
div{
height: 400px;
width: 200px;
position: relative;
margin: 50px auto;
}
img{
width: 200px;
height: 400px;
border: 1px solid #ccc;
position: absolute;
border-radius: 5px;
transform-origin:bottom center;
transition:1s all ease-in-out;
}
div:hover img:nth-child(1){
transform: rotate(-35deg)
}
div:hover img:nth-child(2){
transform: rotate(-25deg)
}
div:hover img:nth-child(3){
transform: rotate(-15deg)
}
div:hover img:nth-child(4){
transform: rotate(-5deg)
}
div:hover img:nth-child(5){
transform: rotate(5deg)
}
div:hover img:nth-child(6){
transform: rotate(15deg)
}
div:hover img:nth-child(7){
transform: rotate(25deg)
}
div:hover img:nth-child(8){
transform: rotate(35deg)
}
</style>
</head>
<body>
<div id="mydiv">
</div>
<script type="text/javascript">
var mydiv = document.getElementById('mydiv');
var img = document.getElementsByTagName('img');
img.map(function(item){
return console.log(item.index)
})
console.log(img.length)
</script>
</body>
</html>
