正方体鼠标旋转

最新推荐文章于 2024-08-23 11:10:08 发布

lmt473895742

最新推荐文章于 2024-08-23 11:10:08 发布

阅读量27

点赞数

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/lmt473895742/article/details/134811711

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .c {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
    perspective: 1000px;
    perspective-origin: 150% -50%;


  }

  .container {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    perspective: 1000px;
    perspective-origin: 150% -50%;

  }

  .item {
    position: absolute;
    width: 200px;
    height: 200px;

  }

  .one {
    background-color: blue;
    opacity: 0.3;
    transform: translateZ(100px);
  }

  .two {
    background-color: pink;
    opacity: 0.3;
    transform: rotateY(180deg) translateZ(100px);


  }

  .three {
    background-color: purple;
    opacity: 0.3;
    transform: rotateY(90deg) translateZ(100px);

  }

  .four {
    background-color: red;
    opacity: 0.3;
    transform: rotateY(-90deg) translateZ(100px);

  }

  .five {
    background-color: yellow;
    opacity: 0.3;
    transform: rotateX(90deg) translateZ(100px);
  }

  .six {
    background-color: green;
    opacity: 0.3;
    transform: rotateX(-90deg) translateZ(100px);
  }
</style>

<body>
  <div class="c">
    <div class="container">
      <div class="one item"></div>
      <div class="two item"></div>
      <div class="three item"></div>
      <div class="four item"></div>
      <div class="five item"></div>
      <div class="six item"></div>
    </div>

  </div>
</body>
<script>
  const ele = document.querySelector('.container')
  ele.addEventListener('mousedown', function (e) {

    let p1 = e.pageX - ele.offsetLeft
    let p2 = e.pageY - ele.offsetTop

    document.addEventListener('mousemove', move)
    function move(e) {
      console.log('1111');
      // ele.style.left = e.pageX - p1 + 'px'
      // ele.style.top = e.pageY - p2 + 'px'
      ele.style.transform = "rotateX(" + (e.pageX - p1) + "deg) rotateY(" + (e.pageY - p2) + "deg) rotateZ(0deg)";

    }
    document.addEventListener('mouseup', function () {
      document.removeEventListener('mousemove', move)
    })
  })
</script>

</html>