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

<!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>