css3新特性轮播图片特效

最新推荐文章于 2021-09-24 15:58:09 发布

驻风丶

最新推荐文章于 2021-09-24 15:58:09 发布

阅读量140

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/qq_43378240/article/details/113976472

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果如图
在这里插入图片描述
css

<style>
	*{margin:0;padding:0;}
	body{perspective:1500px;perspective-origin:50% 200%;}
	@keyframes rotateBox{
		0%{transform:rotatey(0deg);}
		100%{transform:rotatey(360deg);}
	}
	div.content{width:300px;height:200px;position:relative;margin:300px auto;transform-style:preserve-3d;animation:rotateBox 8s linear 0s infinite;}
	div.content>img{width:300px;height:200px;position:absolute;top:0;left:0;}
	div.content>img:nth-child(1){transform:rotatey(0deg) translatez(300px)}
	div.content>img:nth-child(2){transform:rotatey(60deg) translatez(300px)}
	div.content>img:nth-child(3){transform:rotatey(120deg) translatez(300px)}
	div.content>img:nth-child(4){transform:rotatey(180deg) translatez(300px)}
	div.content>img:nth-child(5){transform:rotatey(240deg) translatez(300px)}
	div.content>img:nth-child(6){transform:rotatey(300deg) translatez(300px)}
</style>

html

<body>
	<div class="content">
		<img src="img/1.jpg" alt="">
		<img src="img/2.jpg" alt="">
		<img src="img/3.jpg" alt="">
		<img src="img/4.jpg" alt="">
		<img src="img/5.jpg" alt="">
		<img src="img/6.jpg" alt="">
	</div>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

驻风丶

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3新特性轮播图片特效

效果如图css<style> *{margin:0;padding:0;} body{perspective:1500px;perspective-origin:50% 200%;} @keyframes rotateBox{ 0%{transform:rotatey(0deg);} 100%{transform:rotatey(360deg);} } div.content{width:300px;height:200px;position:relative;margi
复制链接

扫一扫