3D旋转菜单 - 技术栈

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      cursor: url("./openhand1.png"), auto;
    }

    .big_box {

      width: 500px;

      height: 500px;

      margin: 200px auto;

      border: 1px solid red;

    }

    .box {

      -webkit-transform-style: preserve-3d;

      -moz-transform-style: preserve-3d;

      -ms-transform-style: preserve-3d;

      transform-style: preserve-3d;

      transform-origin: 200px 200px 0px;

      position: relative;


      transform: rotatex(-22deg) rotatey(0deg) rotatez(0deg)scale3d(1, 1, 1);

    }

    .box span {

      transition: all 1s linear;

    }

    span {

      display: block;

      position: absolute;

      width: 400px;

      height: 400px;

      box-sizing: border-box;

      border: 1px solid #999;
      font-size: 60px;

      border-radius: 12%;
      color: red;
    }

    .box span:nth-child(1) {
      /* background: red; */
      /* background: url("./openhand1.png"); */
      /* background-size: 100% 100%; */
      /* transform: rotatey(-90deg) translatex(-50px); */
      background: url("./openhand1.png");
      background-size: 100% 100%;
      transform: translateZ(200px);
    }

    .box span:nth-child(2) {

      /* background-color: green; */


      /* transform: rotatey(90deg) translatex(100px); */
      background: url("./openhand1.png");
      background-size: 100% 100%;
      transform: translateZ(-200PX) rotatey(180deg);
    }

    .box span:nth-child(3) {

      background: url("./openhand1.png");
      background-size: 100% 100%;
      transform: translateX(-200px) rotateY(-90deg);
    }

    .box span:nth-child(4) {
      background: url("./openhand1.png");
      background-size: 100% 100%;
      transform: translateX(200px) rotateY(90deg);
      ;
    }

    .box:hover span {

      /* opacity: 0.3; */

    }

    .box:hover {

      animation-play-state: paused;

    }
  </style>
</head>

<body>
  <div class="big_box">
    <div class="box">
      <span>1</span>
      <span>2</span>
      <span><i class="content">这是一段文本</i></span>
      <span>4</span>
    </div>
  </div>
  <script>
    move();


    //鼠标按下且移动时触发，

    function move() {

      var body = document.querySelector("body");

      var box = document.querySelector(".box");

      var content = document.querySelector(".content");
      content.onclick = function () {
        console.log(111)
      }
      var x = 0, y = 0, z = 0;

      var xx = 0, yy = 0;

      var xArr = [], yArr = [];

      window.onmousedown = function (e) {//鼠标按下事件

        body.style.cursor = 'url("./closedhand1.png"),auto';

        xArr[0] = e.clientX / 2;//获取鼠标点击屏幕时的坐标

        yArr[0] = e.clientY / 2;

        window.onmousemove = function (e) {//鼠标移动事件------------当鼠标按下且移动时触发

          xArr[1] = e.clientX / 2;//获取鼠标移动时第一个点的坐标

          yArr[1] = e.clientY / 2;

          yy += xArr[1] - xArr[0];//获得鼠标移动的距离

          xx += yArr[1] - yArr[0];


          // box.style.transform = "rotatex(" + xx + "deg) rotatey(" + yy + "deg) rotatez(0deg)scale3d(1,1,1)";
          box.style.transform = "rotatex(-22deg) rotatey(" + yy + "deg) rotatez(0deg)scale3d(1,1,1)";

          xArr[0] = e.clientX / 2;

          yArr[0] = e.clientY / 2;

        }

      };

      window.onmouseup = function () {//鼠标抬起事件------------用于清除鼠标移动事件，

        body.style.cursor = 'url("./openhand1.png"),auto';

        window.onmousemove = null;

      }

    }



  </script>
</body>

</html>