CSS3,3D效果轮播图

最新推荐文章于 2023-03-24 10:11:07 发布
最新推荐文章于 2023-03-24 10:11:07 发布
阅读量411 收藏
点赞数
分类专栏： 前端
原文链接：https://www.mk2048.com/blog/blog_hjbckicbbkaa.html
版权

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

大家还记得我昨天的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>

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

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

xiaozhen0610
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用CSS和js实现3D轮播图
还想陪你看场雪
04-25 371
css+js实现3D轮播图
CSS3 -- 3D轮播图
qq_51248309的博客
04-08 4282
css的3d轮播图
css:用css实现图片旋转轮播3d效果
weixin_43389331的博客
04-23 1619
CSS3的transform-style: :css3属性，在3d空间非常重要的一个属性，有两个值： flat 子元素将不保留其 3D 位置，默认值。 preserve-3d 子元素将保留其 3D 位置。 要注意的是ie不支持 transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。 效果显示效果图 思路：把六张图片放在一起，每张图片转换角度，角度自己调试，中间一张图片作为中...
css轮播图_手把手教你用纯css3实现轮播图效果
weixin_39978282的博客
11-27 943
作者：忽如寄链接：https://www.jianshu.com/p/28643f36011e一、随便说几句####css3动画效果的强大不言而喻，自它出现一直热度不减，它与js动画的优劣也一直成为前端界争论的话题，不可置疑的是css3动画的出现在一定程度上降低了动画效果的实现难度，利于前端的学习，其精简的代码量把我们从烦人的js调试中解放出来，当然css的动画效果有其局限性，我们不能只用css3...
CSS异形轮播（3D动画）
yangxh11111的博客
12-12 3549
css异形轮播<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style type="text/css"> *
练手小案例：用js实现3D轮播图
hu_666666的博客
12-25 1155
一分钟学会使用HTML5+CSS3+JS实现3D轮播图，绝对的干货！
3D轮播图（纯css)
weixin_61197471的博客
01-23 1071
html <div class="container"> <div class="card-box"> <div class="card"> <img src="./img/1.jpg" alt=""> </div> <div class="card"> <img src="./img/2.jpg" alt=""> </
css 3d轮播图效果
weixin_43978604的博客
09-20 1048
在react上 实现 的 css 3d 轮播效果 效果图 tip 效果图 正转是 点击切换 反转是模拟触摸切换 思路 css 用到 perspective transform-style 开启3d 效果 图片 平均分布在 360度 上 （图片数量与圆的半径 需注意 出现图片重叠可调整半径） 轮播切换 通过设置整体角度实现 需注意3d中心点 css .carousel{ ...
CSS实现3D轮播效果
Showingbun的博客
03-09 3899
通过大牛张鑫旭的分享理解css 3D图片轮播效果 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 其实3D图片轮播就是将所有图片摆弄成一个立体的对象 然后进行旋转。 思路是：所有图片在一个容器内，设置图片的position为absolu
html+css3D轮播图片
01-29
HTML和CSS是网页设计的基础，其中...通过以上69行代码实现的3D轮播图，不仅展示了HTML和CSS3的强大功能，还提供了良好的用户体验。在实际项目中，可以根据需求调整样式和交互细节，以适应不同的设计风格和功能需求。
CSS3图片3D旋转轮播特效.zip
07-11
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js css3图片3D旋转轮播特效</title> <link rel="stylesheet" type="text/css" href="css/normalize.css?3.1.64" /> <link rel="stylesheet" type="text/css" href="css/demo.css?3.1.64"> <link rel="stylesheet" href="css/style.css?3.1.64"> </head> <body>[removed][removed] <div class="htmleaf-container"> <h1>3D Rotating Carousel Examples</h1> <h2>Three images</h2> <div class="carousel"> <figure> <img > <img > <img > </figure> <nav> <button class="nav prev">Prev</button> <button class="nav next">Next</button> </nav> </div> <h2>Four images</h2> <div class="carousel"> <figure> <img > <img > <img > <img > </figure> <nav> <button class="nav prev">Prev</button> <button class="nav next">Next</button> </nav> </div> js css3实现的多个图片3D旋转轮播特效，很好看的网站焦点图立体旋转切换代码。
HTML实现3D轮播图
09-30
HTML实现3D轮播图,即拿即用，非常好用，有空可以欣赏一下
js+css3图片3D旋转轮播特效
06-09
"js+css3图片3D旋转轮播特效"就是一个结合JavaScript与CSS3技术，为网站焦点图提供立体旋转切换效果的实例。这种特效可以使得网站的图像展示更加生动，增加用户的交互体验。 首先，我们来了解一下CSS3。CSS3是层叠...
jQuery+CSS 3D轮播图切换效果Demo
12-07
jQuery+CSS 3D轮播图切换效果Demo 不需要添加Flash文件，纯Css写出来的效果。 已经把没有用的冗余代码删除，最精简的部分留了下来。里边一些字体文件不想要的话可以删除，不会影响整体效果。
基于CSS3 animation动画属性实现轮播图效果
09-24
在本文中，我们将深入探讨如何利用CSS3的animation属性来实现轮播图效果，这是一种常见的网页元素，用于展示多张图片或内容的自动切换。 首先，我们需要了解animation属性的基本构成。animation属性是一个简写属性...
VUE 3D轮播图封装实现方法
08-27
轮播图封装实现方法是指使用VUE框架实现的3D轮播图效果，具有无缝轮播、进入变大、离开缩小（类3D切换效果）等功能点。 二、实现功能点 （1）、无缝轮播 无缝轮播是指轮播图可以无缝连接的效果，即当用户滑动到...
3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）...
didengshi9188的博客
05-13 280
前不久我做了一个3d仿酷狗的轮播图，用的技术原理就是简单的jquery遍历+css样式读写。 这次呢，我们换一种思路（呵呵其实换汤不换药），看到上次那个轮播吗？你有没有发现用jquery的animate来写的话（酷狗那轮播样式6个其实还好），如果很多的话呢？会怎样，是不是得写一大坨？这显然不是我们想要的，那怎么办呢？其实既然是样式嘛，那我们就可以封成一个css类，一个类名，我们动态的把...
实现简易3d轮播图
转身浮生
03-24 1492
2、当基本样式写完后，要思考使用如何使其发生位置变换，由于学识微薄，使用改变类名的办法使其位置变化，同时使用定时器使其开始自动轮播。1、html与css先将主体框架以及样式写出来，将图片一行排列，然后设置舞台元素的长宽，超出部分隐藏，使用。
4张图片3D轮播效果css
最新发布
05-30
以下是一个简单的基于CSS的3D轮播效果，可以实现4张图片的展示： HTML代码： ``` <div class="carousel"> <figure class="slide"> <img src="image1.jpg" alt="Image 1"> </figure> <figure class="slide"> <img src="image2.jpg" alt="Image 2"> </figure> <figure class="slide"> <img src="image3.jpg" alt="Image 3"> </figure> <figure class="slide"> <img src="image4.jpg" alt="Image 4"> </figure> </div> ``` CSS代码： ``` .carousel { position: relative; width: 100%; height: 500px; perspective: 1500px; margin: 0 auto; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s; } .slide:nth-child(1) { transform: translateZ(0); } .slide:nth-child(2) { transform: rotateY(90deg) translateZ(200px); } .slide:nth-child(3) { transform: rotateY(180deg) translateZ(200px); } .slide:nth-child(4) { transform: rotateY(270deg) translateZ(200px); } .carousel:hover .slide { transform: rotateY(-90deg); } .slide img { display: block; width: 100%; height: 100%; backface-visibility: hidden; object-fit: cover; } ``` 解释： - `perspective` 属性定义了观察者距离物体的距离，用于增强3D效果。 - `transform-style` 属性定义了子元素如何在3D空间中呈现，`preserve-3d` 值表示子元素保留其3D位置。 - `transform` 属性定义了元素的变换，包括平移、旋转、缩放等操作。`translateZ` 表示在z轴上平移，`rotateY` 表示绕y轴旋转。 - `transition` 属性定义了元素变换的过渡效果。 - `backface-visibility` 属性定义了元素背面是否可见，`hidden` 值表示不可见。 - `object-fit` 属性定义了图片如何适应元素的大小，`cover` 值表示保持宽高比例，填充元素。 点击鼠标滚轮可以进行交互，左右移动鼠标可以旋转轮播图。可以根据实际需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值