前端学习日记：css3的transition-tranform(-origin)实现扑克牌扇形展开效果

最新推荐文章于 2024-08-25 20:52:11 发布

Stephen·You

最新推荐文章于 2024-08-25 20:52:11 发布

阅读量616

点赞数

分类专栏：前端文章标签：前端学习日记

本文链接：https://blog.csdn.net/weixin_42585386/article/details/102511298

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

margin:100px auto;
position: relative;

}

.box img{
position: absolute;
left:0;
top:0;
transition:all 1s;

/* 设置变换中心*/
transform-origin: center bottom;
box-shadow: 2px 2px 3px 0px #333;

}

.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>
</head>
<body>
<div class="box">
<img src="images/pk2.png" alt=""/>
<img src="images/pk2.png" alt=""/>
<img src="images/pk2.png" alt=""/>
<img src="images/pk2.png" alt=""/>
<img src="images/pk2.png" alt=""/>
<img src="images/pk2.png" alt=""/>
<img src="images/pk2.png" alt=""/>
<img src="images/pk2.png" alt=""/>
<img src="images/pk2.png" alt=""/>
<img src="images/pk2.png" alt=""/>
<img src="images/pk2.png" alt=""/>
<img src="images/pk2.png" alt=""/>
<img src="images/pk2.png" alt=""/>
</div>
</body>