CSS 变换旋转 3D - Hover 在卡的每个角落

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; }.card.roll-TL { transform: rotate3d(1, -1, 0, 20deg); -webkit-box-shadow: 5px 5px 13px 2px rgba(0,0,0,0.41); box-shadow: 5px 5px 13px 2px rgba(0,0,0,0.41); }.card.roll-TR { transform: rotate3d(-1, -1, 0, -20deg); -webkit-box-shadow: -5px 5px 13px 2px rgba(0,0,0,0.41); box-shadow: -5px 5px 13px 2px rgba(0,0,0,0.41); }.card.roll-BL { transform: rotate3d(-1, -1, 0, 20deg); -webkit-box-shadow: 5px -5px 13px 2px rgba(0,0,0,0.41); box-shadow: 5px -5px 13px 2px rgba(0,0,0,0.41); }.card.roll-BR { transform: rotate3d(1, -1, 0, -20deg); -webkit-box-shadow: -5px -5px 13px 2px rgba(0,0,0,0.41); box-shadow: -5px -5px 13px 2px rgba(0,0,0,0.41); }

 <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; } /*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>