标签：一体机 style 轮播 rotateY 100% transform webkit var 3D

     <div id="drag-container_view" class="padding_draw">
      <div id="drag-container">
        <div id="spin-container">
          <div v-for="image in crbList" :key="image.id" class="image_item_div"
            :style="{background:`${image.yanse}`}">
            <router-link class="image_item_div_link"
              :to="{name:'crb_detail', params: {id:image.id}}">
              <img class="image_item" :src="image.image">
              <span class="span_div"
                :style="{background:'rgba(0, 0, 0, 0.1)',border: `2px solid ${image.yanse}` }">{{ image.name }}</span>
            </router-link>
          </div>
        </div>
      </div>
      <div id="ground" />
    </div>

动态获取接口数据后  执行该渲染方法即可

    crblist_3D() {
      // You can change global variables here:
      var radius = 600; // how big of the radius
      var autoRotate = true; // auto rotate or not
      var rotateSpeed = -30; // unit: seconds/360 degrees
      var imgWidth = 200; // width of images (unit: px)
      var imgHeight = 250; // height of images (unit: px)
      // Link of background music - set 'null' if you dont want to play background music

      // ===================== start =======================
      // animation start after 1000 miliseconds
      setTimeout(init, 500);

      var odrag_view = document.getElementById('drag-container_view');
      var odrag = document.getElementById('drag-container');
      var ospin = document.getElementById('spin-container');
      var aImg = ospin.getElementsByTagName('div');
      console.log('aImg===', aImg);
      var aVid = ospin.getElementsByTagName('video');
      // var aEle = [...aImg]; // combine 2 arrays
      var aEle = ospin.getElementsByTagName('div'); // combine 2 arrays

      console.log('aEle===', aEle);
      // Size of images
      ospin.style.width = imgWidth + 'px';
      ospin.style.height = imgHeight + 'px';

      // Size of ground - depend on radius
      var ground = document.getElementById('ground');
      ground.style.width = radius * 3 + 'px';
      ground.style.height = radius * 3 + 'px';

      function init(delayTime) {
        for (var i = 0; i < aEle.length; i++) {
          aEle[i].style.transform =
            'rotateY(' +
            i * (360 / aEle.length) +
            'deg) translateZ(' +
            radius +
            'px)';
          aEle[i].style.transition = 'transform 0.8s';
          aEle[i].style.transitionDelay =
            delayTime || (aEle.length - i) / 6 + 's';
        }
      }

      function applyTranform(obj) {
        // Constrain the angle of camera (between 0 and 180)
        if (tY > 180) tY = 180;
        if (tY < 0) tY = 0;

        // Apply the angle
        obj.style.transform = 'rotateX(' + -tY + 'deg) rotateY(' + tX + 'deg)';
      }

      function playSpin(yes) {
        ospin.style.animationPlayState = yes ? 'running' : 'paused';
      }

      var sX;
      var sY;
      var nX;
      var nY;
      var desX = 0;
      var desY = 0;
      var tX = 0;
      var tY = 15;

      // auto spin
      if (autoRotate) {
        var animationName = rotateSpeed > 0 ? 'spin' : 'spinRevert';
        ospin.style.animation = `${animationName} ${Math.abs(
          rotateSpeed
        )}s infinite linear`;
      }

      // setup events
      odrag_view.onpointerdown = function (e) {
        clearInterval(odrag.timer);
        e = e || window.event;
        var sX = e.clientX;
        var sY = e.clientY;

        this.onpointermove = function (e) {
          e = e || window.event;
          var nX = e.clientX;
          var nY = e.clientY;
          desX = nX - sX;
          desY = nY - sY;
          tX += desX * 0.1;
          tY += desY * 0.1;
          applyTranform(odrag);
          sX = nX;
          sY = nY;
        };
        // auto spin
        if (autoRotate) {
          var animationName = rotateSpeed > 0 ? 'spin' : 'spinRevert';
          ospin.style.animation = `${animationName} ${Math.abs(
            rotateSpeed
          )}s infinite linear`;
        }

        this.onpointerup = function (e) {
          odrag.timer = setInterval(function () {
            desX *= 0.95;
            desY *= 0.95;
            tX += desX * 0.1;
            tY += desY * 0.1;
            applyTranform(odrag);
            playSpin(false);
            if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
              clearInterval(odrag.timer);
              playSpin(true);
            }
          }, 17);
          this.onpointermove = this.onpointerup = null;
        };

        return false;
      };
      // 鼠标滚动事件兼容性 wheel、onwheel

      // 修改当前pint
      // let wheelEvent =
      //   'onwheel' in document.createElement('div')
      //     ? 'wheel' // Modern browsers support "wheel"
      //     : document.onmousewheel !== undefined
      //     ? 'mousewheel' // Webkit and IE support at least "mousewheel"
      //     : 'DOMMouseScroll'; //滚动事件的兼容

      // document.addEventListener(
      //   wheelEvent,
      //   function (e) {
      //     e = e || window.event;
      //     var d = e.wheelDelta / 20 || -e.detail;
      //     radius += d;
      //     init(1);
      //   },
      //   false
      // );
      // document.onwheel = function (e) {
      //   e = e || window.event;
      //   var d = e.wheelDelta / 20 || -e.detail;
      //   radius += d;
      //   init(1);
      // };

      // document.onmousewheel = function (e) {
      //   e = e || window.event;
      //   var d = e.wheelDelta / 20 || -e.detail;
      //   radius += d;
      //   init(1);
      // };
    },

样式：

.four-container {
  width: 100%;
  height: 100%;
  min-height: calc(100vh);
  min-width: 100%;
  border: 2px solid #ccc;
  background: url('../../../assets/page/crb_bj.png') no-repeat;
  background-size: 100% 100%;
  .more_video {
    position: absolute;
    bottom: 50px;
    right: 50px;
    height: 115px;
    width: 418px;
    z-index: 9999;
    background-color: transparent;
    border-style: none;
    background: url('../../../assets/page/crb_gkgdsp.png') no-repeat;
    background-size: 100% 100%;
  }
  .logo_view {
    width: 124px;
    height: 68px;
    float: right;
    margin-right: 100px;
  }
  body {
    height: 100%;
    /* for touch screen */
    touch-action: none;
  }

  body {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .image_item {
    width: 180px;
    height: 180px;
  }
  .padding_draw {
    padding: 20px;
  }
  #drag-container,
  #spin-container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 8% auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-10deg);
    transform: rotateX(-10deg);
  }
  .image_item_div_link {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #drag-container .image_item_div {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: bottom;
    margin-top: 20px;
    // line-height: 200px;
    font-size: 20px;
    text-align: center;
    // -webkit-box-shadow: 0 0 8px #fff;
    // box-shadow: 0 0 8px #fff;
    -webkit-box-reflect: below 10px
      linear-gradient(transparent, transparent, #0005);
  }
  #drag-container .span_div {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;

    border-radius: 40px;
    padding: 10px 5px;
    margin-top: 185px;
    min-width: 80%;
    color: #fff;
    background-color: #ccc;
  }
  #drag-container .image_item_div:hover,
  #drag-container video:hover {
    -webkit-box-shadow: 0 0 15px #fffd;
    box-shadow: 0 0 15px #fffd;
    -webkit-box-reflect: below 10px
      linear-gradient(transparent, transparent, #0007);
  }

  #drag-container h1 {
    font-family: Serif;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 300px;
    -webkit-transform: translate(-50%, -50%) rotateX(90deg);
    transform: translate(-50%, -50%) rotateX(90deg);
    color: #fff;
  }

  #ground {
    width: 1400px;
    height: 900px;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotateX(90deg);
    transform: translate(-50%, -50%) rotateX(90deg);
    background: -webkit-radial-gradient(
      center center,
      farthest-side,
      #9993,
      transparent
    );
  }

  @-webkit-keyframes spin {
    from {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    to {
      -webkit-transform: rotateY(360deg);
      transform: rotateY(360deg);
    }
  }

  @keyframes spin {
    from {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    to {
      -webkit-transform: rotateY(360deg);
      transform: rotateY(360deg);
    }
  }
  @-webkit-keyframes spinRevert {
    from {
      -webkit-transform: rotateY(360deg);
      transform: rotateY(360deg);
    }
    to {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }
  @keyframes spinRevert {
    from {
      -webkit-transform: rotateY(360deg);
      transform: rotateY(360deg);
    }
    to {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }
}

pc 浏览器  鼠标滑动正常

标签：一体机,style,轮播,rotateY,100%,transform,webkit,var,3D
来源： https://blog.csdn.net/qq_33878858/article/details/119082425

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。