html5旋转相册源码,css实现旋转相册代码

html

cssdiv {

width:200px;

height:400px;

position:relative;

margin:500px auto;

}

div img {

width:200px;

height:400px;

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

}

本文最后更新于2020-3-13，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

分享到：