3d 平面转盘

最新推荐文章于 2024-11-16 07:16:12 发布
Mtao&
最新推荐文章于 2024-11-16 07:16:12 发布
阅读量269
点赞数
文章标签： 3d 平面 javascript
本文链接：https://blog.csdn.net/qq_45186619/article/details/141900006
版权
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>diffuse</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: 1;
      }
      body {
        width: 100vw;
        height: 100vh;
        background: url(./img/icon_18.png) no-repeat center / 100% 100%;
      }
      /* 原始样子 */
      #diffuse {
        width: 42vw;
        height: 42vw;
        /* border: 1px solid #ccc; */
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        border-radius: 999px;
        transform-style: preserve-3d;
      }
      .diffuse-btn {
        transition: 0.2s ease-out;
        opacity: 1;
        z-index: 1;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        display: block;
        border-radius: 999px;
        border: 1px solid #f60;
        color: #fff;
        width: 100px;
        height: 30px;
        line-height: 30px;
      }
      .diffuse-list {
        position: relative;
        width: 100%;
        height: 100%;
        transform: scale(0);
        /* transition: 0.3s ease-out; */
        opacity: 0;
        transform-origin: center;
        animation: rotate 56s linear infinite;
        -webkit-animation: rotate 56s linear infinite;
		transform-style: preserve-3d;
      }
      .diffuse-list li {
        text-align: center;
        position: absolute;
        display: block;
        border-radius: 999px;
        border: 4px solid rgb(115, 255, 0);
        color: #fff;
        width: 80px;
        height: 80px;
        transform: translate(-50%, -50%);
		transform-style: preserve-3d;
      }

      /* 动画样子 */
      .diffuse-on .diffuse-btn {
        opacity: 0;
      }
      .diffuse-on .diffuse-list {
        transform: scale(1, 1);
        opacity: 1;
        z-index: 2;
      }
      .wai-huan {
        position: absolute;
        left: -38px;
        top: 21vw;
        right: 0;
        bottom: 0;
        margin: auto;
        display: block;
        width: 110%;
        height: 28%;
        background: url(./img/box_1.png) no-repeat center;
        background-size: 100% 100%;
      }
	  .yuanpan_box_one_name{
		transform: rotateX(0deg);
	  }
      .boxs {
        width: 100%;
        height: 100%;
        transform: rotateX(80deg) translate3d(0%, 128%, 0);
      }
      .boxs .diffuse-list::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        /* transform: rotateX(80deg) translate3d(0%, 128%, 0); */
        background: url(./img/yuan2.png) no-repeat center;
        background-size: 100% 100%;
      }
      @keyframes rotate {
        0% {
          transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
        }

        25% {
          transform: rotate(270deg);
          -webkit-transform: rotate(270deg);
        }

        50% {
          transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
        }

        75% {
          transform: rotate(90deg);
          -webkit-transform: rotate(90deg);
        }

        100% {
          transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="diffuse" class="diffuse-on">
      <div class="diffuse-btn" id="diffuse-btn">Click Me</div>
      <div class="wai-huan"></div>
      <div class="boxs">
        <ul class="diffuse-list">
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
          <li class="yuanpan_box_one">
            <div class="yuanpan_box_one_name">
              <div>你好</div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <script>
      /*点击开始动画*/
      //   document.getElementById("diffuse-btn").onclick = function () {
      //     document.getElementById("diffuse").className = "diffuse-on";
      //     setTimeout(function () {
      //       document.getElementById("diffuse").className = "";
      //     }, 3300);
      //   };

      /*把圆点绘制到圆线上*/
      (function (window) {
        var x,
          y,
          lis = document.querySelectorAll(".diffuse-list li"),
          r = document.querySelector("#diffuse").clientHeight / 2 /*圆半径*/,
          gap = 360 / lis.length /*夹角度数*/,
          radian = Math.PI / 180; /*弧度*/

        for (var i = lis.length - 1; i >= 0; i--) {
          /*计算x,y*/
          x = r + r * Math.cos(gap * i * radian); /*x= r+rcos0*/
          y = r + r * Math.sin(gap * i * radian); /*y= r+rsin0*/

          lis[i].style.left = x + "px";
          lis[i].style.top = y + "px";
        }
      })(window);
    </script>
  </body>
</html>