CSS变换旋转3D-悬停在卡的每个角上

Question

我正在尝试使用css 3d旋转来模拟当鼠标悬停在卡上时将鼠标悬停在四个象限上的情况。左上，右上，左下，右下。我使左上/右上工作，但是无论我尝试哪种组合，我都无法使下效果与上效果相同。是否有关于如何使左下/右下看起来正确的想法，就像它们被顶上的角看起来正确一样被向下推？另外，如果在CSS / JS中有更好的方法可以完全做到这一点，请告诉我，我只是第一次弄乱这些CSS转换。

function ThzhotspotPosition(evt, el, percent) {
  var left = el.offset().left;
  var top = el.offset().top;
  if (percent) {
    x = (evt.pageX - left) / el.outerWidth() * 100;
    y = (evt.pageY - top) / el.outerHeight() * 100;
  } else {
    x = (evt.pageX - left);
    y = (evt.pageY - top);
  }

  return {
    x: Math.round(x),
    y: Math.round(y)
  };
}

$(".card").mousemove(function(e) {
  var hp = ThzhotspotPosition(e, $(this), true); // true = percent | false or no attr = px

  if (hp.x >= 50 && hp.y >= 50) {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-BR");
  } else if (hp.x >= 50 && hp.y < 50) {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-TR");
  } else if (hp.x < 50 && hp.y >= 50) {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-BL");
  } else {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-TL");
  }

  $('#debug').text(hp.x + '%x' + ' ' + hp.y + '%y');
});


$(".card").hover(
  function(e) {
    //$( this ).addClass( "roll-left" );

  },
  function() {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    });
  }
);

.card {
  width: 200px;
  height: 280px;
  background: red;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card.roll-TL {
  transform: rotate3d(1, -1, 0, 20deg);
}

.card.roll-TR {
  transform: rotate3d(-1, -1, 0, -20deg);
}

.card.roll-BL {
  transform: rotate3d(-1, 1, 0, 20deg);
}

.card.roll-BR {
  transform: rotate3d(1, 1, 0, 20deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">Testing</div>
<div id="debug"></div>

Answer 1

我认为您的js代码正确（因为我在运行它时没有看到问题），只是调整了一些CSS。

function ThzhotspotPosition(evt, el, percent) {
  var left = el.offset().left;
  var top = el.offset().top;
  if (percent) {
    x = (evt.pageX - left) / el.outerWidth() * 100;
    y = (evt.pageY - top) / el.outerHeight() * 100;
  } else {
    x = (evt.pageX - left);
    y = (evt.pageY - top);
  }

  return {
    x: Math.round(x),
    y: Math.round(y)
  };
}

$(".card").mousemove(function(e) {
  var hp = ThzhotspotPosition(e, $(this), true); // true = percent | false or no attr = px

  if (hp.x >= 50 && hp.y >= 50) {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-BR");
  } else if (hp.x >= 50 && hp.y < 50) {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-TR");
  } else if (hp.x < 50 && hp.y >= 50) {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-BL");
  } else {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-TL");
  }

  $('#debug').text(hp.x + '%x' + ' ' + hp.y + '%y');
});


$(".card").hover(
  function(e) {
    //$( this ).addClass( "roll-left" );

  },
  function() {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    });
  }
);

.card {
  width: 200px;
  height: 280px;
  background: red;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card.roll-TL {
  transform: rotate3d(1, -1, 0, 20deg);
}

.card.roll-TR {
  transform: rotate3d(-1, -1, 0, -20deg);
}

.card.roll-BL {
  transform: rotate3d(-1, -1, 0, 20deg);
}

.card.roll-BR {
  transform: rotate3d(1, -1, 0, -20deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">Testing</div>
<div id="debug"></div>