CSS Transform Rotate 3D - 悬停在卡片的每个角落

Question

我正在尝试使用 css 3d 旋转来模拟当鼠标悬停在卡片上时按下它分为 4 个象限。左上、右上、左下、右下。我让左上/右上工作，但无论我尝试什么组合，我都无法让底部效果与顶部一样工作。知道如何使左下/右下角看起来正确，就像它们被向下推一样，就像顶角看起来正确一样？另外，如果在 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: 100px;

    height: 150px;

    background: red;

    position: relative;

    transition: transform 1s;

    transform-style: preserve-3d;

}

Answer 1

我假设你的 js 代码是正确的（因为我在运行它时没有看到问题），只需调整一些 css。function ThzhotspotPosition(evt, el, percent) {&nbsp; var left = el.offset().left;&nbsp; var top = el.offset().top;&nbsp; if (percent) {&nbsp; &nbsp; x = (evt.pageX - left) / el.outerWidth() * 100;&nbsp; &nbsp; y = (evt.pageY - top) / el.outerHeight() * 100;&nbsp; } else {&nbsp; &nbsp; x = (evt.pageX - left);&nbsp; &nbsp; y = (evt.pageY - top);&nbsp; }&nbsp; return {&nbsp; &nbsp; x: Math.round(x),&nbsp; &nbsp; y: Math.round(y)&nbsp; };}$(".card").mousemove(function(e) {&nbsp; var hp = ThzhotspotPosition(e, $(this), true); // true = percent | false or no attr = px&nbsp; if (hp.x >= 50 && hp.y >= 50) {&nbsp; &nbsp; $(this).removeClass(function(index, className) {&nbsp; &nbsp; &nbsp; return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');&nbsp; &nbsp; }).addClass("roll-BR");&nbsp; } else if (hp.x >= 50 && hp.y < 50) {&nbsp; &nbsp; $(this).removeClass(function(index, className) {&nbsp; &nbsp; &nbsp; return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');&nbsp; &nbsp; }).addClass("roll-TR");&nbsp; } else if (hp.x < 50 && hp.y >= 50) {&nbsp; &nbsp; $(this).removeClass(function(index, className) {&nbsp; &nbsp; &nbsp; return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');&nbsp; &nbsp; }).addClass("roll-BL");&nbsp; } else {&nbsp; &nbsp; $(this).removeClass(function(index, className) {&nbsp; &nbsp; &nbsp; return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');&nbsp; &nbsp; }).addClass("roll-TL");&nbsp; }&nbsp; $('#debug').text(hp.x + '%x' + ' ' + hp.y + '%y');});$(".card").hover(&nbsp; function(e) {&nbsp; &nbsp; //$( this ).addClass( "roll-left" );&nbsp; },&nbsp; function() {&nbsp; &nbsp; $(this).removeClass(function(index, className) {&nbsp; &nbsp; &nbsp; return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');&nbsp; &nbsp; });&nbsp; });.card {&nbsp; width: 200px;&nbsp; height: 280px;&nbsp; background: red;&nbsp; position: relative;&nbsp; transition: transform 1s;&nbsp; transform-style: preserve-3d;}/*the backside*/.card:after{&nbsp; content:'';&nbsp; position:absolute;&nbsp; left:0;top:0;right:0;bottom:0;&nbsp; background: gray;&nbsp; transform: translateZ(-10px);}.card.roll-TL {&nbsp; transform: rotate3d(1, -1, 0, 20deg);}.card.roll-TR {&nbsp; transform: rotate3d(-1, -1, 0, -20deg);}.card.roll-BL {&nbsp; transform: rotate3d(-1, -1, 0, 20deg);}.card.roll-BR {&nbsp; 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>