poker1.gif
1.属性介绍
属性transform：rotate();为让图片2D旋转的属性
下面为实现上面图片的案例代码
<!DOCTYPE html>
<html>
<head>
<title>旋转</title>
<style type="text/css">
img{
margin: 100px;
transition: all 0.6s; /*过渡时间为0.6秒*/
<!-- 旋转参考点： -->
/*transform-origin: center center; /*默认值*/
/*transform-origin: top left;*/
/*transform-origin: 20px 30px;*/
}
img:hover{
transform: rotate(360deg); /*deg为旋转度数*/
}
</style>
</head>
<body>
<img src="./pokerK.jpg" width="200" alt="">
<img src="./pokerJ.jpg" width="200" alt="">
<img src="./pokerQ.jpg" width="200" alt="">
</body>
</html>
2. 旋转相册
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 220px;
height: 310px;
position: relative;
border: 1px solid pink;
margin: 300px 300px;
float: left;
}
.div2{
margin: 300px 300px;
float: left;
}
.div2 img{
transform-origin: center center; /*右边扑克中心旋转*/
}
div img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.6s;
transform-origin: top right; /*左边扑克绕右上角旋转*/
}
/*下面为每张图片设置需要旋转的度数*/
div:hover img:nth-child(1){
transform: rotate(60deg);
}
div:hover img:nth-child(2){
transform: rotate(120deg);
}
div:hover img:nth-child(3){
transform: rotate(180deg);
}
div:hover img:nth-child(4){
transform: rotate(240deg);
}
div:hover img:nth-child(5){
transform: rotate(300deg);
}
div:hover img:nth-child(6){
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>
<img src="./pokerJ2.jpg" alt="">
<img src="./pokerQ2.jpg" alt="">
<img src="./pokerK2.jpg" alt="">
<img src="./pokerJ.jpg" alt="">
<img src="./pokerQ.jpg" alt="">
<img src="./pokerK.jpg" alt="">
</div>
<div class="div2">
<img src="./pokerJ2.jpg" alt="">
<img src="./pokerQ2.jpg" alt="">
<img src="./pokerK2.jpg" alt="">
<img src="./pokerJ.jpg" alt="">
<img src="./pokerQ.jpg" alt="">
<img src="./pokerK.jpg" alt="">
</div>
</body>
</html>
效果图：
Rpoker2.gif
如有错误或建议欢迎大家指出与评论哈，希望这篇博文能帮助到大家，也可以分享给需要的人。
如需转载，请注明出处。https://www.jianshu.com/p/b3bb50430cdf
网友评论