在HTML中rotate属性,CSS 图片的旋转rotate旋转属性（一）

poker1.gif

1.属性介绍

属性transform：rotate();为让图片2D旋转的属性

下面为实现上面图片的案例代码

旋转

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为旋转度数*/

}

2. 旋转相册

案例代码：

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);

}

效果图：

Rpoker2.gif

如有错误或建议欢迎大家指出与评论哈，希望这篇博文能帮助到大家，也可以分享给需要的人。