---恢复内容开始---

大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧!

....这个轮播图主要是用CSS3里的transform的旋转属性来完成3D效果的,然后配合原生js的显示隐藏,达到了3D旋转轮播图的效果:

<!DOCTYPE HTML>

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<title>3D图片切换1</title>

		<style>

			/*设置一个关键帧*/

			@-webkit-keyframes open {

				0% {

					-webkit-transform: rotateX(180deg);

					opacity: 0;

				}

				57% {

					-webkit-transform: rotateX(-16deg);

					opacity: 1;

				}

				66% {

					-webkit-transform: rotateX(14deg);

				}

				74% {

					-webkit-transform: rotateX(-12deg);

				}

				81% {

					-webkit-transform: rotateX(10deg);

				}

				87% {

					-webkit-transform: rotateX(-8deg);

				}

				92% {

					-webkit-transform: rotateX(6deg);

				}

				96% {

					-webkit-transform: rotateX(-4deg);

				}

				100% {

					-webkit-transform: rotateX(0deg);

				}

			}

			@-webkit-keyframes clos {

				0% {

					-webkit-transform: rotateX(0deg);

					opacity: 1;

				}

				100% {

					-webkit-transform: rotateX(-180deg);

					opacity: 0;

				}

			}

			body {

				background: #eee;

			}

			.box {

				width: 600px;

				height: 400px;

				position: relative;

				margin: 30px auto;

			}

			/*按钮*/

			#prev,

			#next {

				width: 50px;

				height: 50px;

				background: #efefef;

				border-radius: 25px;

				position: absolute;

				top: 100px;

				box-shadow: 2px 2px 10px #666;

				text-align: center;

				font-size: 40px;

				line-height: 50px;

				font-family: Verdana, Geneva, sans-serif;

				text-decoration: none;

				color: #fff;

				-webkit-text-stroke: 2px #ccc;

			}

			#prev {

				left: -100px;

			}

			#next {

				right: -100px;

			}

			/*图片区*/

			#imgs {

				width: 600px;

				height: 400px;

				position: relative;

				-webkit-transform-style: preserve-3d;

				-webkit-perspective: 1000px;

			}

			/*图片*/

			#imgs img {

				width: 600px;

				height: 400px;

				position: absolute;

				left: 0;

				top: 0;

				-webkit-transform-origin: bottom;

				-webkit-transform: rotateX(-180deg);

				opacity: 0;

			}

			/*设置显示和隐藏后的样式*/

			#imgs .show {

				-webkit-animation: open 1.2s ease-in;

				-webkit-transform: rotateX(0deg);

				opacity: 1;

			}

			#imgs .hide {

				-webkit-animation: clos 1s ease;

				-webkit-transform: rotateX(-180deg);

				opacity: 0;

			}

		</style>

		<script>

			window.onload = function() {

				//要用到的元素获取元素

				var oPrev = document.getElementById("prev");

				var oNext = document.getElementById("next");

				var aImg = document.getElementsByTagName("img");

				var iNow = 0;

				//上一页点击事件

				oPrev.onclick = function() {

					aImg[iNow].className = "hide";

					iNow--;

					if(iNow < 0) {

						//判断全局变量

						iNow = aImg.length - 1;

					}

					aImg[iNow].className = "show";

				};

				//下一页点击事件

				oNext.onclick = function() {

					aImg[iNow].className = "hide";

					iNow++;

					if(iNow == aImg.length) {

//					如果全局变量和长度相等,就变回第一张,造成视觉循环的假象

						iNow = 0;

					}

					aImg[iNow].className = "show";

				};

			}

		</script>

	</head>

	<body>

		<div class="box">

			<!--上一页-->

			<a href="#" id="prev"><</a>

			<div id="imgs">

				<img src="img/img1.jpg" alt="" class="show" />

				<img src="img/img2.jpg" alt="" />

				<img src="img/img3.jpg" alt="" />

				<img src="img/img4.jpg" alt="" />

				<img src="img/img5.jpg" alt="" />

			</div>

			<!--下一页-->

			<a href="#" id="next">></a>

		</div>

	</body>

</html>

　　不知道你们学会了吗???很简单哦!

---恢复内容结束---

CSS3,3D效果轮播图的更多相关文章

  1. css3实现3D切割轮播图案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 案例:3D切割轮播图

    一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...

  3. 带锁的3D切割轮播图

    3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...

  4. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  5. js访3d上下轮播图

    js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  6. 使用Swiper快速实现3D效果轮播

    最近经常接到轮播图3D效果的需求, 特在此记录一下以备之后使用. 具体实现效果如下: 在这里介绍两种使用方式, 一种原生的html+php后端渲染, 一种是使用vue. 原生实现 引入 首先我们介绍原 ...

  7. CSS3+JS切割轮播图

    以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...

  8. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  9. CSS3 实现简单轮播图

    用css3动画实现图片切换效果,原理还是改变left值.只有最简单的自动播放功能,切换后短时间静止,通过最后的位置克隆第一张图片,实现无缝切换. html结构 <div id="con ...

随机推荐

  1. Codeforces - tag::data structures 大合集 [占坑 25 / 0x3f3f3f3f]

    371D 小盘子不断嵌套与大盘子,最后与地面相连,往里面灌水,溢出部分会往下面流,求每次操作时当前的盘子的容量 其实这道题是期末考前就做好了的.. 链式结构考虑并查集,然后没了(求大佬解释第一个T的点 ...

  2. GTP

     GPRS隧道协议(GPRS Turning Protocol) GTP是一个高层协议,位于TCP/IP或UDP/IP等协议上,提供主机间端到端通信, 通过隧道标志(TEI)在路径协议上复用  GTP ...

  3. JVM虚拟机知识点

    java -version 显示JDK 版本 Java HotSpot Client:1.5版本之后,热点探测,对加载的class文件做标记,对于频繁使用的class即时编译JIT本地缓存,不再重新进 ...

  4. （转）Shell分析服务器日志

    一.目录 转载链接:https://mp.weixin.qq.com/s/W1ekSiHgbGInqQ9HmZaJDA 自己的小网站跑在阿里云的ECS上面,偶尔也去分析分析自己网站服务器日志,看看网站 ...

  5. 练习 DOUBLE INSERT

      练习 DOUBLE INSERT 目标:从一张表取数据插入到另一张表中,此外需要为插入的目标表做一个应用级的日志表,也就是说在插入目标表的同时,还需要将相同的数据插入到日志表中. 在案例一中,我们 ...

  6. Vector bit-select and part-select addressing verilog片选写法

    大端 m m[ a +: b ] == m[ (a+b-1) : a ] m[ a -: b ] == m[ a : (a-b+1) ] 小端 n n[ a +: b ] == n[ a : (a+b ...

  7. 关于CSS3动画性能

    前天我去面试了...好吧,对于自己6年6份工作的悲催经历,我自己也是醉了. 但没办法,我这种当时上学没好好学习,临毕业才出家写代码的半吊子码农,起步没起好,以至于一直没能找到真正让自己满意的工作. 通 ...

  8. django中多个字段的模糊查询

    django中多个字段的模糊查询 使用Entity.objects.filter(name_contains='kris').filter(address='beijing') 这个方法是指名字包含k ...

  9. CCF 201409-4 最优配餐

    问题描述 试题编号: 201409-4 试题名称: 最优配餐 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 栋栋最近开了一家餐饮连锁店,提供外卖服务.随着连锁店越来越多,怎么 ...

  10. win10中VirtualBox联网设置

    <分享>关于win10操作系统中VirtualBox无法桥接的解决方法 版权声明:本文为博主原创文章,未经博主允许不得转载. 升级win10,本来是一件很好的事,想好好体验一下新版本的感觉 ...