主页 / 问题 / 1232241
Accepted
soledar10
Asked:2022-01-16 22:15:27 +0000 UTC2022-01-16 22:15:27 +0000 UTC

带有内部元素的 3D 立方体的动画

  • 772

任务：一个位于立方体内的球的动画，它应该根据显示器上光标的位置移动，并且球将沿着立方体的底部移动将重复显示器。光标移动时，小球应具有加减速动力学（即视觉上有加减速） 在此处输入图像描述

你能告诉我最简单的方法是什么吗？

javascript

1 个回答

  1. Best Answer

    这不是一个有竞争力的答案，我不假装是什么，只是作为可能解决方案的一种选择。当然，除非我正确理解了这项任务。代码很简单，我想很容易弄清楚是什么。打开窗口到整页，看看是不是：

    $(function() {
  var mouseX = 0,
    mouseY = 0,
    // Определяем границы для передвижения
    limitX = 300 - 24,
    limitY = 300 - 24;
  $(window).mousemove(function(e) {
    var offset = $('.field').offset();
    // Находим координаты курсора
    mouseX = Math.min(e.pageX - offset.left, limitX);
    mouseY = Math.min(e.pageY - offset.top, limitY);
    if (mouseX < 0) mouseX = 0;
    if (mouseY < 0) mouseY = 0;
  });
  var follower = $(".ball");
  // Начальные координаты на момент загрузки страницы
  var xp = 0,
    yp = 0;
  var loop = function() {
    // Скорость передвижения. Чем больше значение, тем медленнее передвижение
    xp += (mouseX - xp) / 10;
    yp += (mouseY - yp) / 10;
    follower.css({
      left: xp,
      top: -yp
    });
    requestAnimationFrame(loop);
  };
  loop();
});
    body {
  background-color: #e2e2e2;
}

.container {
  width: 300px;
  height: 300px;
  margin: 30px 0 0 60px;
  perspective: 900px;
}

.cube {
  position: relative;
  width: 300px;
  height: 300px;
  transform-origin: 50% 50% -150px;
  transform: rotate3d(-40, -40, 0, 40deg);
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.edge {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 5px solid #b1b1b1;
  border-radius: 5px;
  background: rgba(0, 0, 0, .3);
  background: radial-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .5));
  transform-origin: 50% 50% -150px;
}

.edge:nth-child(2) {
  transform: rotateY(90deg);
}

.edge:nth-child(3) {
  transform: rotateY(-90deg);
}

.edge:nth-child(4) {
  transform: rotateX(90deg);
}

.edge:nth-child(5) {
  transform: rotateX(-90deg);
}

.edge:nth-child(6) {
  transform: rotateY(180deg);
}

.field {
  position: absolute;
  top: calc(100% - 24px);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.ball {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 28px;
  border-radius: 100%;
  background-color: blue;
  background: radial-gradient(circle at 10px 10px, red, blue);
  box-shadow: 3px -5px 5px 0px rgba(50, 50, 50, 0.75);
  transform: rotate(-0deg) skew(-16deg, 0deg);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="cube">
    <div class="edge"></div>
    <div class="edge"></div>
    <div class="edge"></div>
    <div class="edge"></div>
    <div class="edge">
      <div class="field">
        <div class="ball"></div>
      </div>
    </div>
    <div class="edge"></div>
  </div>
</div>

    • 9

相关问题