css实现旋转相册代码

星辰博客

发表文章数:12

微兔优选

各种优惠,各种捡漏,尽在微兔优选!

点击立即加群
首页 » 技术教程 » css实现旋转相册代码

css实现旋转相册代码

html

<div>
    <img src="https://api.btstu.cn/sjbz/api.php?method=mobile&1">
    <img src="https://api.btstu.cn/sjbz/api.php?method=mobile&2">
    <img src="https://api.btstu.cn/sjbz/api.php?method=mobile&3">
    <img src="https://api.btstu.cn/sjbz/api.php?method=mobile&4">
    <img src="https://api.btstu.cn/sjbz/api.php?method=mobile&5">
    <img src="https://api.btstu.cn/sjbz/api.php?method=mobile&6">
</div>

 

css

div {
	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);
}

未经允许不得转载:作者:星辰博客, 转载或复制请以 超链接形式 并注明出处 星辰博客
原文地址:《css实现旋转相册代码》 发布于2020-11-07

分享到:
赞(0) 打赏

评论 抢沙发

5 + 8 =


长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

切换登录

注册