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) {

  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;

}

/*the backside*/

.card:after{

  content:'';

  position:absolute;

  left:0;top:0;right:0;bottom:0;

  background: gray;

  transform: translateZ(-10px);

}

.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>