Html
    Css
    Js

    
                        
.content {
	width:100vw;
	height:200px;
	perspective:800px;
	border:1px #000000 solid;
	display:flex;
	justify-content:center;
	align-items:center;
	transform-style:preserve-3d;
	transform:rotateX(-5deg);
}
.swiper {
	width:150px;
	height:100px;
	position:relative;
	transform-style:preserve-3d;
	transform:rotateY(0deg);
	transition:oll 0.02s linear;
}
.pic-content {
	width:150px;
	height:100px;
	position:absolute;
}
.swiper img {
	width:150px;
	height:100px;
}
.pic1 {
	transform:rotateY(0deg) translateZ(180px);
}
.pic2 {
	transform:rotateY(60deg) translateZ(180px);
}
.pic3 {
	transform:rotateY(120deg) translateZ(180px);
}
.pic4 {
	transform:rotateY(180deg) translateZ(180px);
}
.pic5 {
	transform:rotateY(240deg) translateZ(180px);
}
.pic6 {
	transform:rotateY(300deg) translateZ(180px);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

3D旋转轮播图

更新时间:2020-08-11 22:27:28

0