CSS异形轮播(3D动画)

## CSS异形轮播(3D动画)##


<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">
    *{
        padding: 0 0;
        margin: 0 0;
    }
    ul{
        list-style: none;
    }
    .btn{
        width: 20px;
        height: 10px;
        background: red;
    }
    .stage{
        margin: 100px auto;
        width: 560px;
        height: 300px;
        position: relative;
        perspective: 3000px;
        transform-style: preserve-3d;
        transition: all 5s;
    }
    .stage>ul li {
        position: absolute;
        top: 0px;
        left: 0px;
        transition: all 2s;
    }
    .stage ul{
        perspective: 300px;
    }
    .no1{
        transform: translateX(-470px) scale(0.2);
        display: none;
    }
    .no5{
        transform: translateX(470px) scale(0.2);
        display: none;
    }
    .no2{
        transform: rotateY(20deg) scale(0.8) translateZ(-100px) translateX(-160px);
        z-index: 10;
    }
    .no4{transform: rotateY(-20deg) scale(0.8) translateZ(-100px) translateX(160px);
        z-index: 10;
    }
    .no3{transform:  scale(0.9);z-index: 20;}

  style>
  <script type="text/javascript">
    window.onload=function(){
      var ul=document.getElementById("ul");
      var lis=document.getElementById("ul").getElementsByTagName("li")
      var btn=document.getElementById("btn");
      var arr=["no1","no2","no3","no4","no5"];
      var lock=true;

      btn.onclick=function(){
        if(lock===true){
          var lastOne=arr.pop()
        arr.unshift(lastOne)
        for(var i=0;ifalse;
          setTimeout(function(){
           lock=true;
          },1200);
        }
      }
    }
  script>
head>
<body>
<bottom id="btn">按钮bottom>
  <div class="stage">
    <ul id="ul">
      <li class="no1"><img src="1.jpg" alt="" />li>
      <li class="no2"><img src="2.jpg" alt="" />li>
      <li class="no3"><img src="3.jpg" alt="" />li>
      <li class="no4"><img src="4.jpg" alt="" />li>
      <li class="no5"><img src="5.jpg" alt="" />li>
    ul>  
       div> 
body>
html> 

图片:
1.jpg
CSS异形轮播(3D动画)_第1张图片
2 .jpg
CSS异形轮播(3D动画)_第2张图片
3.jpg
CSS异形轮播(3D动画)_第3张图片
4 .jpg
CSS异形轮播(3D动画)_第4张图片
5.jpg
CSS异形轮播(3D动画)_第5张图片

你可能感兴趣的:(CSS)