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>