CSS3(十八) CSS3 立体3D效果轮播图

CSS3

发布日期: 2020-05-13

更新日期: 2020-05-24

文章字数: 729

阅读时长: 4 分

阅读次数:

代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>3D轮播</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    li {
      list-style-type: none;
    }
    .wrap {
      width: 800px;
      margin: 300px auto;
      position: relative;
      -webkit-perspective: 800px;
    }
    #picall {
      width: 800px;
      height: 360px;
    }
    /*创建3D空间必须写定位*/
    #picall li {
      position: relative;
      width: 50px;
      height: 360px;
      -webkit-transform-style: preserve-3d;
      float: left;
      -webkit-transform-origin: center center -180px;
    }
    #picall li a {
      position: absolute;
      width: 50px;
      height: 360px;
      display: block;
    }
    #picall li a:nth-of-type(1) {
      background: url(images/2.jpg) no-repeat;
      top: 0px;
      left: 0px;
    }
    #picall li a:nth-of-type(2) {
      background: url(images/1.jpg) no-repeat;
      top: -360px;
      left: 0px;
      -webkit-transform-origin: bottom;
      -webkit-transform: rotateX(90deg);
    }
    #picall li a:nth-of-type(3) {
      background: url(images/3.jpg) no-repeat;
      top: 0px;
      left: 0px;
      -webkit-transform: translateZ(-360px) rotateX(180deg);
    }
    #picall li a:nth-of-type(4) {
      background: url(images/4.jpg) no-repeat;
      top: 360px;
      left: 0px;
      -webkit-transform-origin: top;
      -webkit-transform: rotateX(-90deg);
    }
    #picall li span {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 360px;
      height: 360px;
      -webkit-transform-origin: left;
    }
    #picall li span:nth-of-type(1) {
      -webkit-transform: rotateY(90deg);
      background: rgba(20, 20, 20, 0.4);
    }
    #picall li span:nth-of-type(2) {
      -webkit-transform: rotateY(90deg);
      left: 50px;
      background: rgba(25, 20, 20, 0.4);
    }
    #btn {
      padding: 10px auto;
      position: absolute;
      right: 0px;
      bottom: 0px;
      z-index: 999;
    }
    #btn li {
      width: 50px;
      height: 50px;
      background: black;
      border-radius: 50%;
      font: 24px/50px '微软雅黑';
      float: left;
      margin: 0px 10px;
      color: #ffffff;
      text-align: center;
    }
    #btn li.active {
      background: white;
      color: black;
    }
  </style>
  <body>
    <div class="wrap">
      <ul id="picall"></ul>
      <ol id="btn">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ol>
    </div>
  </body>
  <script>
    var box = document.getElementsByClassName('wrap')[0]
    var Aul = document.getElementById('picall')
    var btnall = document.getElementById('btn')
    Rotate(box, Aul, btnall)
    function Rotate(x, y, z) {
      var width = 50
      var length = Math.floor(box.clientWidth / width)
      var Liall = ''
      var index = 0
      var old = 0
      var flag = true
      var liindex = 0
      /*创建节点*/
      function CreateNode() {
        for (var i = 0; i < length; i++) {
          Liall +=
            '<li><a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <span></span> <span></span> </li>'
        }
        Aul.innerHTML = Liall
      }
      CreateNode()
      /*创建节点结束*/
      /*消除多余背景*/
      function clear() {
        for (var i = 0; i < length; i++) {
          i > length / 2 ? --index : ++index
          Aul.getElementsByTagName('li')[i].style.zIndex = index
        }
      }
      clear()
      /*消除背景结束*/
      /*插入背景*/
      function bg() {
        for (var i = 0; i < length; i++) {
          for (var n = 0; n < 4; n++) {
            Aul.getElementsByTagName('li')[i].getElementsByTagName('a')[
              n
            ].style['backgroundPosition'] = -width * i + 'px 0px'
          }
        }
      }
      bg()
      /*插入背景结束*/
      /*点击事件*/
      function clickfn() {
        if (flag) {
          flag = false
          clearInterval(timer)
          for (var i = 0; i < length; i++) {
            Aul.children[i].style.transition = '0.4s ' + i * 100 + 'ms'
            Aul.children[i].style.WebkitTransform =
              'rotateX(' + this.index * 90 + 'deg)'
          }
          btnall.children[this.index].className = 'active'
          btnall.children[old].className = ' '
          old = this.index
          liindex = this.index
          flag = true
        }
      }
      /*点击事件结束*/
      for (var i = 0; i < 4; i++) {
        btnall.children[i].index = i
        btnall.children[i].onclick = clickfn
      }
      /*自动化事件*/
      function auto() {
        if (liindex >= 3) {
          liindex = -1
        }
        if (flag) {
          ++liindex
          flag = false
          for (var i = 0; i < length; i++) {
            Aul.children[i].style.transition = '0.4s ' + i * 100 + 'ms'
            Aul.children[i].style.WebkitTransform =
              'rotateX(' + liindex * 90 + 'deg)'
          }
          btnall.children[liindex].className = 'active'
          btnall.children[old].className = ' '
          old = liindex
          flag = true
        }
      }
      /*自动化事件结束*/
      var timer = null
      timer = setInterval(auto, 3000)
      /*自动化事件结束*/
      box.onmouseover = function () {
        clearInterval(timer)
      }
      box.onmouseleave = function () {
        timer = setInterval(auto, 3000)
      }
      window.onblur = function () {
        clearInterval(timer)
      }
      window.onfocus = function () {
        timer = setInterval(auto, 3000)
      }
    }
  </script>
</html>