纯CSS+HTML实现3D立方体轮播图

最新推荐文章于 2024-08-26 09:57:43 发布
最新推荐文章于 2024-08-26 09:57:43 发布
阅读量2.3k 收藏 14
点赞数 3
分类专栏： 技术小妙招 文章标签： css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46690660/article/details/108589790
版权

1.实现点击左右按钮，点击图片下方圆点都可以使立方体旋转到对应面，实现了不同图片的展示
2.主要技术：HTML元素的先后顺序，css的旋转，radio标签和lable标签的使用，transform-style: preserve-3d;，transition: all 3s;，transform: rotateY(0) translateZ(200px);，
效果如图：
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css轮播图</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				box-sizing: border-box;
			}
			.box{
				width: 600px;
				height: 500px;
				position: relative;
				margin: 100px auto;
			}
			/*设置3d场景,所有的变化时间为2秒*/
			.inner{
				width: 400px;
				height: 400px;
				position: absolute;
				left: 100px;
				transform-style: preserve-3d;
				transition: all 2s;
				perspective: 100000px;
			}
			
			.inner li{
				width: 400px;
				height: 400px;
				position: absolute;
				top: 0;
				background-size: cover;
				background-position: center;
				opacity: 0.7;
				transition: all 3s;
			}
			/*给li设置背景图片,且旋转位置组成立方体*/
			.inner li:nth-of-type(1){
				background-image: url(img/1.jpg);
				transform: rotateY(0) translateZ(200px);
			}
			.inner li:nth-of-type(2){
				background-image: url(img/2.jpg);
				transform: rotateY(90deg) translateZ(200px);
			}
			.inner li:nth-of-type(3){
				background-image: url(img/3.jpg);
				transform: rotateY(180deg) translateZ(200px);
			}
			.inner li:nth-of-type(4){
				background-image: url(img/4.jpg);
				transform: rotateY(270deg) translateZ(200px);
			}
			.inner li:nth-of-type(5){
				background-image: url(img/5.jpg);
				transform: rotateX(-90deg) translateZ(200px);
			}
			.inner li:nth-of-type(6){
				background-image: url(img/6.jpg);
				transform: rotateX(90deg) translateZ(200px);
			}
			/*按钮样式*/
			.btn{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 50%;
				margin-top: -50px;
			}
			.left_btn{
				left: 0;
			}
			.right_btn{
				right: 0;
			}
			
			.btn>label{
				display: none;
				position: absolute;
				width: 50px;
				height: 50px;
				background-color: #ccc;
				top: 25px;
				left: 25px;
				border-radius: 25px;
			}
			.btn>label::before{
				content: "";
				display: block;
				position: absolute;
				width: 25px;
				height: 25px;
				border-right: 2px solid black;
				border-bottom: 2px solid black;
				transform: rotate(135deg);
				margin: 13px auto auto 20px;
			}
			.right_btn>label::before{
				transform: rotate(-45deg);
				margin: 13px auto auto 3px;
			}
			/*小圆点样式.*/
			.titles{
				position: absolute;
				width: 100%;
				height: 90px;
				bottom: 0;
				text-align: center;
				line-height: 50px;
			}
			.titles>label{
				width: 15px;
				height: 15px;
				display: inline-block;
				background-color: #cccc;
				border: 1px solid #eee;
				border-radius: 50%;
			}
			/*将单选按钮隐藏*/
			.check{
				display: none;
			}
			/*第1个单选框选中时，第1个按钮显示，第1个圆点变色，显示第1张图片*/
			.check:nth-child(1):checked~.btn>label:nth-child(1){display: block;}
			.check:nth-child(1):checked~.titles>label:nth-child(1){background-color: aqua;}
			.check:nth-child(1):checked~.inner li:nth-of-type(1){opacity: 1;}
			.check:nth-child(1):checked~.inner{transform: rotateY(360deg) rotateX(360deg);}
			/*第2个单选框选中时，第2个按钮显示，第2个圆点变色，显示第2张图片*/
			.check:nth-child(2):checked~.btn>label:nth-child(2){display: block;}
			.check:nth-child(2):checked~.titles>label:nth-child(2){background-color: aqua;}
			.check:nth-child(2):checked~.inner li:nth-of-type(2){opacity: 1;}
			.check:nth-child(2):checked~.inner{transform: rotateY(270deg) rotateX(0);}
			/*第3个单选框选中时，第3个按钮显示，第3个圆点变色，显示第3张图片*/
			.check:nth-child(3):checked~.btn>label:nth-child(3){display: block;}
			.check:nth-child(3):checked~.titles>label:nth-child(3){background-color: aqua;}
			.check:nth-child(3):checked~.inner li:nth-of-type(3){opacity: 1;}
			.check:nth-child(3):checked~.inner{transform: rotateY(540deg) rotateX(360deg);}
			/*第4个单选框选中时，第4个按钮显示，第4个圆点变色，显示第4张图片*/
			.check:nth-child(4):checked~.btn>label:nth-child(4){display: block;}
			.check:nth-child(4):checked~.titles>label:nth-child(4){background-color: aqua;}
			.check:nth-child(4):checked~.inner li:nth-of-type(4){opacity: 1;}
			.check:nth-child(4):checked~.inner{transform: rotateY(90deg) rotateX(0);}
			/*第5个单选框选中时，第5个按钮显示，第5个圆点变色，显示第5张图片*/
			.check:nth-child(5):checked~.btn>label:nth-child(5){display: block;}
			.check:nth-child(5):checked~.titles>label:nth-child(5){background-color: aqua;}
			.check:nth-child(5):checked~.inner li:nth-of-type(5){opacity: 1;}
			.check:nth-child(5):checked~.inner{transform: rotateY(360deg) rotateX(90deg);}
			/*第6个单选框选中时，第6个按钮显示，第6个圆点变色，显示第6张图片*/
			.check:nth-child(6):checked~.btn>label:nth-child(6){display: block;}
			.check:nth-child(6):checked~.titles>label:nth-child(6){background-color: aqua;}
			.check:nth-child(6):checked~.inner li:nth-of-type(6){opacity: 1;}
			.check:nth-child(6):checked~.inner{transform: rotateY(0) rotateX(-90deg);}
			
		</style>
	</head>
	<body>
		<!--核心思想：利用一组单选框每次只可以选中一个的特性和lable标签关联，
		实现选中一个单选框时可以关联到多个lable标签，
		当单选按钮处于选中状态时，利用css3的选择器改变对应的图片显示，
		这样就可以实现点击变换图片或者轮播图的效果，-->
		<div class="box">
			<!--将单选框放到最前面好选择后面的元素-->
			<input type="radio" name="chk" id="chk1" class="check" checked="checked"/>
			<input type="radio" name="chk" id="chk2" class="check"/>
			<input type="radio" name="chk" id="chk3" class="check"/>
			<input type="radio" name="chk" id="chk4" class="check"/>
			<input type="radio" name="chk" id="chk5" class="check"/>
			<input type="radio" name="chk" id="chk6" class="check"/>
			<ul class="inner">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<div class="titles">
			<label for="chk1"></label>
			<label for="chk2"></label>
			<label for="chk3"></label>
			<label for="chk4"></label>
			<label for="chk5"></label>
			<label for="chk6"></label>
			</div>
			<!--将第六个排到第一位---显示第一个时左边按钮是第六个的连接-->
			<div class="btn left_btn">
			<label for="chk6"></label>
			<label for="chk1"></label>
			<label for="chk2"></label>
			<label for="chk3"></label>
			<label for="chk4"></label>
			<label for="chk5"></label>
			</div>
			<!--同理-->
			<div class="btn right_btn">
			<label for="chk2"></label>
			<label for="chk3"></label>
			<label for="chk4"></label>
			<label for="chk5"></label>
			<label for="chk6"></label>
			<label for="chk1"></label>
			</div>
		</div>
	</body>
</html>
清砾
关注
专栏目录
jQuery实现横向手风琴图片轮播焦点图效果
08-23
刚刚介绍完jQuery打飞机游戏，现在我们来点实用的，来分享一款基于jQuery的横向手风琴图片轮播焦点图效果。手风琴效果即图片一张张层叠在一起，鼠标滑过图片时即可展开完整的图片，这样的效果很常见，所以应用也很广泛，大家可以试试这款jQuery焦点图。
网页模板html 3d图片旋转,3D图片旋转轮播
weixin_33117513的博客
06-24 1092
先上效果图：分析：看效果图，其实是好多些长方体在旋转。效果中一共有4幅图，把每幅图都切割成一长条一长条，然后这四幅图的每一长条都拼接成一个长方体，进行旋转变换。html模板：结合之前的3D立方体效果。将代码中的一些重用代码利用.剩下两个边用两个span标签，填充黑色，来充当左右两个边。html:css：.box{ width: 800px; margin: 30px auto; }#picList...
3D渐变的轮播图效果，有点儿意思！
最新发布
流绪@微梦
08-26 977
在Web开发中，轮播图（Carousel）是一种非常常见的功能，用于展示图片或内容，通过自动或手动的方式切换不同的视图，在网页设计中扮演着重要的角色。吸引注意力：轮播图通常位于页面的显眼位置，如首页的顶部或中心区域，能够立即吸引访问者的注意力。通过展示精美、引人注目的图片或视频，轮播图能够激发访问者的兴趣，促使他们进一步探索网站的内容。展示重要信息：轮播图是一种高效展示重要信息或促销活动的方式。商家可以在轮播图中展示最新的产品、优惠活动、重要公告等，以吸引潜在客户的注意并促进销售。
使用html+css+jquery实现3D轮播图
m0_61480985的博客
11-13 2125
这里需要注意的是，如果你不设置一个开过和定时器，当你点击下一张时点击一次没问题，但是连续点击就会出现一点bug，所以我加了一个开关思想，只有一张图片完整的呈现在眼前后，下一张图片才能出来。css部分就是设置样式了，首先就是先给盒子一个宽高，盒子是装显示一张图片的，接下来就是li了，给li设置绝对定位，不然图片不会对齐的。HTML部分首先我们需要一个盒子显示图片，然后在盒子里装入图片，你想装几张图片就可以写几个li,除了图片我们还需要一个按钮来点击。首先就是需要几张图片，但只有一张是显示在我们眼前的。
css3制作手风琴,一步步教你css3手风琴效果的实现
weixin_33205791的博客
08-03 2083
什么是手风琴效果？首先我们先来看一段动画，如下图所示：在上面动画中，我们不难发现，一排照片正常排列，当我鼠标移上(：hover)时，照片会变大显示并且把其它照片挤小。那么在鼠标来回移动的过程中，画面正常显示的效果类似我们的手风琴，所以叫手风琴效果。手风琴效果的实现把图片显示出来通过上面的效果，我们不难发现，首先所有照片的集合是一个有1px边框的div盒子，盒子里面有一组ul li ，每个li标签里...
CSS3 transition实现手风琴效果
astonishqft的博客
01-04 3432
CSS3 transition实现手风琴效果 最近在项目中遇到了一个需求，需要完成一个手风琴效果的展示，最后通过CSS3 transition实现了这个效果，下面就分享下实现方法。 效果 首先看下效果： 可以看到，当我们点击toggle按钮的时候会实现一个带有动画的过渡效果。 transition属性 实现动画效果这要用到了transition的四个属性，分别是：transition-prope...
HTML+CSS实现轮播图
insist100的博客
08-31 8296
1. HTML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> .
jQuery和CSS3超酷3D立方体轮播图插件
12-11
本篇将深入探讨如何利用jQuery和CSS3技术实现一款超酷的3D立方体轮播图插件。 首先，jQuery库在这款插件中的作用主要体现在事件处理和DOM操作上。它提供了一套易于理解的API，用于监听用户的点击事件（如分页圆点...
jQuery+CSS3实现3D立方体旋转效果
10-23
本文将详细介绍如何使用jQuery结合CSS3技术来实现一个具有立体效果的3D立方体旋转展示。 首先，我们需要理解CSS3中的3D转换（3D Transforms）功能，这主要包括perspective（透视）、rotate（旋转）、translate...
jQuery和CSS3超酷3D立方体轮播图效果插件.zip
11-06
本文将深入探讨这两个技术如何结合创建出超酷的3D立方体轮播图效果，以及如何利用提供的插件实现这一效果。 首先，jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画和Ajax交互。...
Hexaflip：超强css3+js旋转3d立方体插件
12-13
Hexaflip是一款基于CSS3和JavaScript的高效3D立方体旋转插件，它为Web开发者提供了丰富的交互式界面设计工具。这款插件以其强大的功能和灵活性而受到广泛关注，尤其适用于创建引人注目的动态效果，如自动旋转的3D...
【博主推荐】html好看的图片轮播多种风格（源码）
热门推荐
全栈工程师，博主正在等你，有合作、疑惑请私信博主。
07-18 1万+
html好看的图片轮播，支持各种配置，html设计自定义图片轮播，html图片轮播，好看的图片轮播效果，html图片轮播带源码。
CSS动画手风琴
chenqiuqian的博客
04-19 631
制作一个简单的手风琴 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0...
纯css实现手风琴效果
知识点沉淀包括不限于前端
07-18 355
效果图 代码 html <div class="demo"> <ul> <li> <p>剑<br>侠<br>客</p> <div>不达成功誓不休。</div> </li> <li> &l
纯CSS实现手风琴效果
qq_36722545的博客
07-22 618
先看一下效果图吧 初始状态： 当鼠标滑过时，滑过的一栏会展开： **大体思路：**首先设置初始的样式，让后当鼠标滑过任一栏目时，先将所有的栏目的宽度设置为30px，且字体大小为0（让文字不显示）； 当滑过某一栏目时，将该栏的宽度设置为510px，字体显示出来，然后用overflow-y: scroll;显示滚动条。 注意：这个样式的设置对每个栏目宽度计算有要求，如果宽度计算不当会出现闪屏； 本...
css3实现的手风琴效果
sunflower_li的博客
03-16 427
利用css3的transition和nth-child实现手风琴         Title             *{margin:0;padding: 0;}         div{width: 780px;height: 200px;overflow: hidden;margin:50px auto;}         ul{width: 780px;heig
【CSS】实现简单易上手的‘手风琴效果‘
LS_952754的博客
08-15 451
【CSS】实现简单易上手的'手风琴效果'
css实现手风琴动画效果
杨阳洋的博客
03-09 2080
利用css写手风琴样式，简简单单5步实现 下面贴代码 &lt;style&gt; .accordion-box{ width: 100%; height: 500px; margin:0 auto; overflow: hidden;} .accordion-box div{ width: 25%; float: left; transition: all 1s...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值