CSS3制作炫酷切割效果轮播图

最新推荐文章于 2023-04-10 20:55:27 发布

Ron韦斯莱

最新推荐文章于 2023-04-10 20:55:27 发布

阅读量963

点赞数 2

本文链接：https://blog.csdn.net/qq_43537987/article/details/89403302

版权

效果展示：
在这里插入图片描述
思路：
当你看到这张图的时候可能会有些启发。

没错就是生成一个正方体，让正方体进行旋转。那切割效果又是怎么做到的呢？
把每个面在平均分成五份，旋转的时候让每份有一个各自的延迟不就好了嘛。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		ul {
			list-style: none;
		}
		.view {
			width: 500px;
			height: 300px;
			margin: 100px auto;
			position: relative;
		} 
		ul {
			width: 100%;
			height: 100%;
			transform-style:preserve-3d;
			transform:rotate3d(1,1,1,-60deg);		
		}
		ul > li {
			width: 20%;
			height: 100%;
			float: left;
			position: relative;
			transform-style:preserve-3d;
			transition:transform 0.5s;
		}
		ul > li > span{
			width: 100%;
			height: 100%;
			position: absolute;
			top:0;
			left: 0;
		}
		ul > li > span:nth-of-type(1) {
			background:url("images/q1.jpg");
			transform:translateZ(150px);
		}
		ul > li > span:nth-of-type(2) {
			background:url("images/q2.jpg");
			transform:translateY(-150px) rotateX(90deg);
		}
		ul > li > span:nth-of-type(3) {
			background:url("images/q3.jpg");
			transform:translateZ(-150px) rotateX(-180deg);
		}
		ul > li > span:nth-of-type(4) {
			background:url("images/q4.jpg");
			transform:translateY(150px) rotateX(-90deg);
		} 
		ul > li:nth-of-type(2) > span {
			background-position: -100%;
		}
		ul > li:nth-of-type(3) > span {
			background-position: -200%;
		}
		ul > li:nth-of-type(4) > span {
			background-position: -300%;
		}
		ul > li:nth-of-type(5) > span {
			background-position: -400%;
		}
		.array-l,.array-r{
			position: absolute;
			width: 40px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			color:#ccc;
			font-size: 20px;
			background: rgba(0,0,0,0.1);
			top:50%;
			transform:translateY(-50%);
		}
		.array-r {
			right: 0;
		}
		.array-l:hover,.array-r:hover {
			background: rgba(0,0,0,0.4);
		}
	</style>
</head>
<body>
	<div class="view">
		<ul>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
		</ul>
		<div class="array-l">&lt;</div>
		<div class="array-r">&gt;</div>
	</div>
	<script src="js/jquery.min.js"></script>
	<script>
	$(function(){
		var index = 0;
		var flag = true;
		$(".array-l").click(function(){
			if(flag==true) {
				flag=false;
				index++;
				$("li").each(function(key,value){
					$(this).css({"transform":"rotateX("+ index*90 +"deg)",
							"transition-delay":(key*0.1)+"s"
					});
				});
				flag=true;
			}		
		});
		$(".array-r").click(function(){
			if(flag==true) {
				flag=false;
				index--;
				$("li").each(function(key,value){
					$(this).css({"transform":"rotateX("+ index*90 +"deg)",
							"transition-delay":(key*0.1)+"s"
					});
				});
				flag=true;
			}		
		});
	});
	</script>
</body>
</html>

Ron韦斯莱

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3制作炫酷切割效果轮播图

效果展示：思路：当你看到这张图的时候可能会有些启发。没错就是生成一个正方体，让正方体进行旋转。那切割效果又是怎么做到的呢？把每个面在平均分成五份，旋转的时候让每份有一个各自的延迟不就好了嘛。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t...
复制链接

扫一扫