扑克牌反转
利用了2d特效
<title>扑克翻转</title>
<style type="text/css">
.box{
width: 300px;
height: 600px;
margin: 50px auto;
}
.box img{
position: absolute;
width: 300px;
height: 600px;
border-radius: 3%;
box-shadow:10px 10px 10px #999;
transition: all 2s;
transform-origin: bottom;
}
.box:hover img:nth-child(1){
transform: rotate(30deg);
}
.box:hover img:nth-child(2){
transform: rotate(20deg);
}
.box:hover img:nth-child(3){
transform: rotate(10deg);
}
.box:hover img:nth-child(4){
transform: rotate(0deg);
}
.box:hover img:nth-child(5){
transform: rotate(-10deg);
}
.box:hover img:nth-child(6){
transform: rotate(-20deg);
}
.box:hover img:nth-child(7){
transform: rotate(-30deg);
}
</style>
</head>
<body>
<div class="box">
<img src="img/1.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/6.jpg">
<img src="img/7.jpg">
<img src="img/8.jpg">
<img src="img/9.jpg">
</div>
</body>
