首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css3之3D转换

css3之3D转换

作者头像
一个淡定的打工菜鸟
发布2018-09-06 17:34:43
5380
发布2018-09-06 17:34:43
举报
文章被收录于专栏:淡定的博客淡定的博客

css3的3D转换,很有意思的一个特效

用到的属性

  1. transform: rotateX(-175deg);沿着x轴旋转
  2. transform: rotateY(-70deg);沿着y轴旋转
  3. transform: rotateZ(360deg);沿着z轴旋转
  4. perspective: 1000px; 规定眼睛距离元素的距离
  5. transform-style: preserve-3d;作用是让该元素中的所有转换元素显示成3D效果
  6. background-position;设置背景图像的起始位置

实现的效果

image
image
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
	<style>
		html,body,ul{
			margin: 0;
			padding: 0;
		}
		.carousel{
			position: relative;
			width: 560px;
			height: 300px;
			box-shadow: 0 0 1px #ccc;
			margin: 100px auto;
		}
		ul{
			list-style: none;
			width: 560px;
			height: 300px;
		}
		li{
			float: left;
			position: relative;
			width: 112px;
			height: 100%;
			transform-style: preserve-3d;
			transition: all 1s;
		}
		span{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		span:nth-child(1){
			transform: translateZ(150px);
			background-image: url(./images/1.jpg);
		}
		span:nth-child(2){
			transform: rotateX(90deg) translateZ(150px);
			background-image: url(./images/2.jpg);
		}
		span:nth-child(3){
			transform: rotateX(180deg) translateZ(150px);
			background-image: url(./images/3.jpg);
		}
		span:nth-child(4){
			transform: rotateX(270deg) translateZ(150px);
			background-image: url(./images/4.jpg);
		}
		li:nth-child(2) span{
			background-position: -112px;
		}
		li:nth-child(3) span{
			background-position: -224px;
		}
		li:nth-child(4) span{
			background-position: -336px;
		}
		li:nth-child(5) span{
			background-position: -448px;
		}
		li:nth-child(2){
			transition-delay: 0.25s;
		}
		li:nth-child(3){
			transition-delay: 0.5s;
		}
		li:nth-child(4){
			transition-delay: 0.75s;
		}
		li:nth-child(5){
			transition-delay: 1s;
		}
		.carousel a{
			text-decoration: none;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			color:#fff;
			font-size: 40px;
		}
		a.prev{
			left: 0;
		}
		a.next{
			right: 0;
		}
	</style>
</head>
<body>
	<div class="carousel">
		<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>
		<a href="javascript:;" class="prev fa fa-chevron-left"></a>
		<a href="javascript:;" class="next fa fa-chevron-right"></a>

	</div>
	<script>
	// 获取元素 两个按钮  li 
		var aLi=document.querySelectorAll('li');
		var prev=document.querySelector('.prev');
		var next=document.querySelector('.next');
		var lastLi=document.querySelector('li:last-child');
		var flag=true;
		lastLi.addEventListener("transitionend",function(){
			flag=true;
		})
		var num=0;
		// 给按钮添加点击事件
		prev.onclick=function(){
			if(flag==false){return;}
			flag=false;
			num++;
			// 遍历所有li 并且给每个li添加样式
			for(var i=0;i<aLi.length;i++){
				aLi[i].style.transform="rotateX("+num*90+"deg)";
			}
		}
		next.onclick=function(){
			if(flag==false){return;}
			flag=false;
			num--;
			// 遍历所有li 并且给每个li添加样式
			for(var i=0;i<aLi.length;i++){
				aLi[i].style.transform="rotateX("+num*90+"deg)";
			}
		}
	</script>
</body>
</html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018/06/14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 用到的属性
  • 实现的效果
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档