200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html5旋转相册源码 css实现旋转相册代码

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

时间:2022-02-19 16:47:15

相关推荐

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

}

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

分享到:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。