使用 CSS 3D 变换从 DOM 对象接收变换后的鼠标事件数据
目前 JavaScript 鼠标事件中是否有任何数据可以让我轻松查找或计算相对于转换元素的 3D 空间的鼠标位置？
为了直观地说明，
左边是没有 3d 矩阵的 div，右边是经过 3d 变换的 div。o 是鼠标事件的起源
+
/|
/ |
+-----+ + |
| | | |
| o| => | o|
| | | |
+-----+ + |
\ |
\|
+
在下面的脚本中，单击 div 中的相同像素将报告一个位于文档的 2d 转换空间中的 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>
Is there currently any data in a javascript mouse event that would allow me to easily find or calculate a mouse position relative to the 3D space of a transformed element?
To illustrate visually,
At left is the div without a 3d matrix, at right is the div after 3d transformation.o is the origin of the mouse event
+
/|
/ |
+-----+ + |
| | | |
| o| => | o|
| | | |
+-----+ + |
\ |
\|
+
In the script below, clicking the same pixels in the div will report an event.layerX which is in the 2d transformation space of the document/screen.
I'm aware, but not thrilled about the prospect of parsing the div's matrix3d and using that to multiply to the event position to discover this, however in the real implementation, the divs will have more complex transformations and this would need to be done on every frame for more than one object and I worry about the overhead that would bring...I certainly wouldn't mind help with that if it's my only option though.
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您似乎正在寻找
offsetX属性event。也许您必须为每个 .face 创建侦听器才能识别事件，因为
offsetX是根据触发事件的target计算的。或者您可能希望坐标从左侧的 0 开始到右侧的宽度*2，那么您可以使用元素的layerX和原始
宽度：无论如何，使用offsetX/offsetY都可以你使用什么转换（至少在我测试过的许多场景中）
It seems like you are looking for the
offsetXpropertyevent.Maybe you'd have to create listeners to every .face in order to identify the events, because the
offsetXis calculated based on thetargetthat fires the event.Or maybe you want the coordinates to start from 0 on the left to width*2 on the right, then you could use the layerX and the original
widthof your elements:Using the offsetX/offsetY works no matter what transform you use (at least in the many scenarios I've tested)