目前 JavaScript 鼠标事件中是否有任何数据可以让我轻松查找或计算相对于转换元素的 3D 空间的鼠标位置？
为了直观地说明，
左边是没有 3d 矩阵的 div，右边是经过 3d 变换的 div。
o是鼠标事件的起源
+
/|
/ |
+-----+ + |
| | | |
| o| => | o|
| | | |
+-----+ + |
\ |
\|
+
在下面的脚本中，单击 div 中的相同像素将报告event.layerX它位于文档/屏幕的二维变换空间中。
我知道，但对解析div的matrix3d并使用它乘以事件位置来发现这一点并不感到兴奋，但是在真正的实现中，div将有更复杂的转换，这需要在不止一个对象的每一帧，我担心会带来的开销……如果这是我唯一的选择，我当然不介意提供帮助。
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
<title></title>
<style type="text/css" media="screen">
body {
background-color: #FFF;
}
img {
position: absolute;
}
#main {
margin: 0;
-webkit-perspective: 1800;
}
#card {
position: relative;
margin: 0 auto;
width: 420px;
height: 562px;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: center center;
}
#card .page {
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: left center;
}
#card .page .face {
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: flat;
}
#card .page .face.front {
z-index: 1;
-webkit-backface-visibility: hidden;
}
#card .page .face.back {
-webkit-transform: rotateY(180deg) translateX(-420px);
}
</style>
</head>
<body>
<div id='main'>
<div id='card'>
<div class='page draggable'>
<div class='face front'>
<img src='front.jpg'/>
</div>
<div class='face back'>
<img src='back.jpg'/>
</div>
</div>
</div>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>
<script>
function rotate() {
$('.page').css("-webkit-transform", "rotate3d(0, -1, 0, 60deg)");
$('.page').mousedown(function(event) {
console.log(event.layerX);
});
}
$(document).ready(function() {
rotate();
});
</script>
</body>
</html>
看来您正在寻找offsetX财产event。
也许您必须为每个 .face 创建侦听器才能识别事件，因为offsetX计算基于target触发事件。
或者也许您希望坐标从左侧的 0 开始到右侧的宽度*2，那么您可以使用layerX 和原始的width你的元素：
console.log((event.layerX<0?width-event.offsetX:width+event.offsetX));
无论您使用什么转换，使用 offsetX/offsetY 都有效（至少在我测试过的许多场景中）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
