代码片
<style>
body{
background-color: #eeeeee;
}
.box{
width:300px;
height:440px;
margin: 100px auto;
position: relative;
}
img{
width:100%;
height: 100%;
transition:all 1s;
position: absolute;
left: 0;
top: 0;
/*变换中心原点*/
transform-origin: center bottom;
/* box-shadow: 0 0 3px 0 #666666;*/
}
/* .box:hover img{
transform: rotate(45deg);
}*/
.box:hover img:nth-child(6){
transform: rotate(-10deg);
}
.box:hover img:nth-child(5){
transform: rotate(-20deg);
}
.box:hover img:nth-child(4){
transform: rotate(-30deg);
}
.box:hover img:nth-child(3){
transform: rotate(-40deg);
}
.box:hover img:nth-child(2){
transform: rotate(-50deg);
}
.box:hover img:nth-child(1) {
transform: rotate(-60deg);
}
.box:hover img:nth-child(8){
transform: rotate(10deg);
}
.box:hover img:nth-child(9){
transform: rotate(20deg);
}
.box:hover img:nth-child(10){
transform: rotate(30deg);
}
.box:hover img:nth-child(11){
transform: rotate(40deg);
}
.box:hover img:nth-child(12){
transform: rotate(50deg);
}
.box:hover img:nth-child(13){
transform: rotate(60deg);
}
</style>
<div class="box">
<img src="5.jpg" alt="">
<img src="5.jpg" alt="">
<img src="5.jpg" alt="">
<img src="5.jpg" alt="">
<img src="5.jpg" alt="">
<img src="5.jpg" alt="">
<img src="5.jpg" alt="">
<img src="5.jpg" alt="">
<img src="5.jpg" alt="">
<img src="5.jpg" alt="">
<img src="5.jpg" alt="">
<img src="5.jpg" alt="">
<img src="5.jpg" alt="">
</div>
CSS3实现扑克牌动画
猜你喜欢
转载自blog.csdn.net/zuo_zuo_blog/article/details/88925646
今日推荐
周排行