旋转的轮播图

最新推荐文章于 2021-05-28 20:47:04 发布

a little peanut

最新推荐文章于 2021-05-28 20:47:04 发布

阅读量1.1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/dayexiaofan/article/details/90577536

版权

前端专栏收录该内容

13 篇文章 11 订阅

订阅专栏

旋转的轮播图

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        body {
        	perspective: 1000px;
        }
		section {
			width: 300px;
			height: 200px;
			margin: 100px auto;
			background: url(../images/img-1.jpg) no-repeat;
			background-size: cover;
			position: relative;
			transform-style: preserve-3d;  /* 让父盒子里面的子盒子以3d效果显示 */
			transition:  5s linear;  /* 匀速  all 是可以省略的， 省略默认的all*/
		}
		section:hover {
			transform: rotateY(360deg);
		}
		section div {
			width: 100%;
			height: 100%;
			background: url(../images/dog.gif) no-repeat;
			background-size: cover;
			position: absolute;
			top: 0;
			left: 0;
		}
		section div:nth-child(1) {
			transform: rotateY(0deg)  translateZ(400px);
		}
		section div:nth-child(2) {
			transform: rotateY(60deg)  translateZ(400px);
		}
		section div:nth-child(3) {
			transform: rotateY(120deg)  translateZ(400px);
		}
		section div:nth-child(4) {
			transform: rotateY(180deg)  translateZ(400px);
		}
		section div:nth-child(5) {
			transform: rotateY(240deg)  translateZ(400px);
		}
		section div:nth-child(6) {
			transform: rotateY(300deg)  translateZ(400px);
		}
        </style>
    </head>
    <body>
	<section>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</section>
    </body>
</html>

在这里插入图片描述

a little peanut

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
旋转的轮播图

旋转的轮播图<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> body { perspective: 1000px; } section { wi...
复制链接

扫一扫