主页 / 问题 / 983152
Accepted
MoloF
Asked:2020-05-19 21:13:09 +0000 UTC2020-05-19 21:13:09 +0000 UTC

CSS | 在 mousemove 上变换平移 (X, Y) 效果

  • 772

有一个效果，在悬停时，以这样的方式为圆设置动画，使得 X 和 Y 中的旋转值发生变化，但是如何实现效果以便它在平移下工作。

var box = $(".scene");
box.on('mousemove', function (e) {
    var x = e.clientX - $(this).offset().left + $(window).scrollLeft();
    var y = e.clientY - $(this).offset().top + $(window).scrollTop();

    var rY = map(x, 0, $(this).width(), -30, 30);
    var rX = map(y, 0, $(this).height(), -30, 30);

    $('#x').html(x);
    $('#y').html(y);

    $(this).children(".box").css("transform", "rotateY(" + rY + "deg)" + " " + "rotateX(" + -rX + "deg)");
});

box.on('mouseenter', function () {
    $(this).children(".box").addClass('transition-fast');
});

box.on('mouseleave', function () {
    $(this).children(".box").removeClass('transition-fast');

    $(this).children(".box").css("transform", "rotateY(" + 0 + "deg)" + " " + "rotateX(" + 0 + "deg)");
});

function map(x, in_min, in_max, out_min, out_max)
{
    return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: monospace;
  font-size: 14px;
}

.stats{
  margin-left: 50px;
  font-size: 20px;
  width: 200px;
}

.scene {
  width: 300px;
  height: 300px;
  perspective: 600px;
  cursor: pointer;
  border: 5px solid #000;
  padding: 50px;
  border-radius: 50%;
}

.box {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center;
  transition: transform 0.5s ease;
  background: #000;
  border-radius: 50%;
}
.box.transition-fast {
  transition: transform 0.05s linear;
}

.side {
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side h2 {
  transform: translateZ(30px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">
  <div class="box">
    <div class="side front-side">
      <h2>Something text</h2>
    </div>
  </div>
</div>
<div class="stats">
  <p>
    X: 
    <span id="x"></span>
  </p>
  <p>
    Y: 
    <span id="y"></span>
  </p>
</div>

实际上，这里是动画（我不知道如何正确调用它），但它必须不旋转，而是朝正确的方向移动但不超出边界。

这是所需的输出：

javascript

1 个回答

  1. Best Answer

    const $eventContainer = $("body");
const $box = $('.box');
const $scene = $('.scene');
// Так как есть паддинг, берем именно значение offsetWidth
const sceneRadius = $scene.get(0).offsetWidth / 2;
const boxRadius = $box.width() / 2; // тут паддинга нет
// Считаем максимально возможно смещение
// Так как круг не должен выходить за сцену
// Смещение должно быть не больше чем радиус сцены минус радиус круга
const maxTranslate = sceneRadius - boxRadius;

$eventContainer.on('mousemove', e => {
  const center = {
    x: $scene.offset().left + $scene.get(0).offsetWidth / 2,
    y: $scene.offset().top + $scene.get(0).offsetHeight / 2
  };
  const mouseCoords = {
    x: e.pageX - center.x,
    y: e.pageY - center.y,
  };
  
  const translateDistance = Math.sqrt(
      mouseCoords.x * mouseCoords.x + mouseCoords.y * mouseCoords.y)
  
  let translate;
  if (translateDistance <= maxTranslate) {
    translate = `translate(${mouseCoords.x}px, ${mouseCoords.y}px)`;
  } else {
    // Нормализуем вектор смещения
    const normalizeCoords = {
      x: mouseCoords.x / translateDistance,
      y: mouseCoords.y / translateDistance,
    };
    
    const finalCoords = {
      x: normalizeCoords.x * maxTranslate,
      y: normalizeCoords.y * maxTranslate,
    };
    
    translate = `translate(${finalCoords.x}px, ${finalCoords.y}px)`;
  }

  $box.css('transform', translate);
});
    *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: monospace;
  font-size: 14px;
}

.scene {
  width: 300px;
  height: 300px;
  cursor: pointer;
  border: 5px solid #000;
  padding: 50px;
  border-radius: 50%;
}

.box {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: center;
  background: #000;
  border-radius: 50%;
}

.side {
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side h2 {
  transform: translateZ(30px);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">
  <div class="box">
    <div class="side front-side">
      <h2>Something text</h2>
    </div>
  </div>
</div>

    • 2

相关问题