3D图片轮播

最新推荐文章于 2023-04-08 23:18:56 发布

tianshizhimeng155

最新推荐文章于 2023-04-08 23:18:56 发布

阅读量527

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/u013267266/article/details/51323183

版权

css3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.要使轮播到最上面后有抖动的效果

帧的比例更小，在终点不断该表

@-webkit-keyframes show
{
0%
{
-webkit-transform:rotateX(180deg);
opacity:0;
}
50%
{
-webkit-transform:rotateX(-25deg);
opacity:1;
}
60%
{
-webkit-transform:rotateX(18deg);
opacity:1;
}
70%
{
-webkit-transform:rotateX(-12deg);
opacity:1;
}
80%
{
-webkit-transform:rotateX(8deg);
opacity:1;
}
90%
{
-webkit-transform:rotateX(-6deg);
opacity:1;
}
100%
{
-webkit-transform:rotateX(0deg);
opacity:1;
}
}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes show
{
	0%
	{
		-webkit-transform:rotateX(180deg);
		opacity:0;
	}
	50%
	{
		-webkit-transform:rotateX(-25deg);
		opacity:1;
	}
	60%
	{
		-webkit-transform:rotateX(18deg);
		opacity:1;
	}
	70%
	{
		-webkit-transform:rotateX(-12deg);
		opacity:1;
	}
	80%
	{
		-webkit-transform:rotateX(8deg);
		opacity:1;
	}
	90%
	{
		-webkit-transform:rotateX(-6deg);
		opacity:1;
	}
	100%
	{
		-webkit-transform:rotateX(0deg);
		opacity:1;
	}
}
@-webkit-keyframes hide
{
	0%
	{
		-webkit-transform:rotateX(0deg);
		opacity:1;
	}
	100%
	{
		-webkit-transform:rotateX(180deg);
		opacity:0;
	}
}
#wrap{ width:400px;height:300px; position:relative; margin:40px auto; -webkit-perspective:800px; -webkit-transform-style:preserve-3d;}
img{ width:400px;height:300px; position:absolute;left:0;top:0; -webkit-transform-origin:bottom; -webkit-transform:rotateX(-180deg); opacity:0;}
#wrap input{ width:60px;height:60px;margin:0;padding:0;background:#ccc;top:100px; position:absolute; border-radius:50%; outline:none;}
#wrap input:nth-of-type(1){ left:-100px;}
#wrap input:nth-of-type(2){ right:-100px;}
.show{-webkit-transform:rotateX(0deg);
opacity:1;-webkit-animation:1s show;}
.hide{-webkit-transform:rotateX(180deg);
opacity:0;-webkit-animation:0.6s hide;}
</style>
<script>
window.οnlοad=function()
{
	var oWrap=document.getElementById("wrap");
	var aBtn=oWrap.getElementsByTagName("input");
	var aImg=oWrap.getElementsByTagName("img");
	var iNow=0;
	aBtn[0].οnclick=function()
	{
		aImg[iNow].className="hide";
		iNow--;
		if(iNow<0)
		{
			iNow=aImg.length-1;
		}
		aImg[iNow].className="show";
	};
	aBtn[1].οnclick=function()
	{
		aImg[iNow].className="hide";
		iNow++;
		if(iNow>=aImg.length)
		{
			iNow=0;
		}
		aImg[iNow].className="show";
	};
};
</script>
</head>
<body>
<div id="wrap">
	<input type="button" value="上一张" />
    <img src="img/img1.jpg" class="show"/>
    <img src="img/img2.jpg" />
    <img src="img/img3.jpg" />
    <img src="img/img4.jpg" />
    <img src="img/img5.jpg" />
    <input type="button" value="下一张" />
</div>
</body>
</html>