我正在嘗試使用 css 3d 旋轉(zhuǎn)來模擬當(dāng)鼠標(biāo)懸停在卡片上時按下它分為 4 個象限。左上、右上、左下、右下。我讓左上/右上工作，但無論我嘗試什么組合，我都無法讓底部效果與頂部一樣工作。知道如何使左下/右下角看起來正確，就像它們被向下推一樣，就像頂角看起來正確一樣？另外，如果在 css/js 中有更好的方法可以完全做到這一點，請讓我知道我只是第一次搞亂這些 css 轉(zhuǎn)換。我添加了陰影來嘗試幫助“推銷”底部被推入而頂部彈出的效果，但它看起來仍然是錯誤的?？赡苤皇俏遥裁囱刍潄y的東西。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;}