从DOM接收转换鼠标事件数据与CSS 3D转换对象 [英] Receiving transformed mouse event data from DOM objects with a CSS 3D transform
问题描述
有目前在JavaScript鼠标事件，让我很容易地找到或计算出鼠标位置相变换元件的三维空间中的任何数据？
要说明直观，
左边是不带3D矩阵格，右边是3D变换后的股利。
0 是鼠标事件的起源
+
/ |
/ |
+ ----- + + |
| | | |
| Ø| =＆GT; | Ø|
| | | |
+ ----- + + |
\ |
\ |
+
在下面的脚本中，单击该分区相同的像素会报告 event.layerX 这是在文件/画面的2D转换空间。
我知道，但不激动不已解析div的的Matrix3D并用它来繁衍到事件的位置，发现这个的前景，但在实际执行中，申报单将有更多复杂的转换，这需要对每一帧进行一个以上的对象，我担心这会带来...我当然不会介意帮助，如果这是我唯一的选择，虽然开销。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =EN＆GT;
＆LT; HEAD＆GT;
＆LT;元字符集=utf-8'＆GT;
＆LT;冠军＆GT;＆LT; /标题＆GT;
＆LT;风格类型=文本/ CSS媒体=屏幕＆GT;
体 {
背景颜色：#FFF;
}
IMG {
位置：绝对的;
}
＃主要 {
保证金：0;
-webkit-观点：1800;
}
＃卡 {
位置：亲属;
保证金：0汽车;
宽度：420px;
高度：562px;
-webkit-变换式：preserve-3D;
-webkit-变换产地：中心中心;
}
#card。第{
位置：绝对的;
-webkit-变换式：preserve-3D;
-webkit-变换产地：左中;
}
#card。第。面对{
位置：绝对的;
宽度：100％;
高度：100％;
-webkit-变换风格：平;
}
#card。第.face.front {
的z-index：1;
-webkit-背面能见度：隐藏;
}
#card。第.face.back {
-webkit-变换：rotateY（180deg）translateX（-420px）;
}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID ='主'＆GT;
＆LT; DIV ID ='卡'＆GT;
＆LT; DIV CLASS =页面拖动'＆GT;
＆LT; DIV CLASS ='前脸'＆GT;
＆所述; IMG SRC =front.jpg'/＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS ='面临回'＆GT;
＆所述; IMG SRC =back.jpg'/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;脚本的src =HTTP：//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'>＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
功能旋转（）{
$（'页面'）的CSS（ - WebKit的变换，ROTATE3D（0，-1，0，60deg））。
$（'页面'）。鼠标按下（功能（事件）{
执行console.log（event.layerX）;
}）;
}
$（文件）。就绪（函数（）{
旋转（）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
好像你正在寻找的 offsetX 属性事件。
也许你不得不为了查明事件创建听众每一个。面对，因为 offsetX 是基于目标计算触发该事件。
或者，也许你想要的坐标从0开始在左边宽* 2在右侧，那么你可以使用layerX和原宽度的元素：
的console.log（（event.layerX℃的宽event.offsetX：宽+ event.offsetX））;
使用offsetX / offsetY作品无论变换你用什么（至少在许多情况下我测试过）
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>
It seems like you are looking for the offsetX property event.
Maybe you'd have to create listeners to every .face in order to identify the events, because the offsetX is calculated based on the target that 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 width of your elements:
console.log((event.layerX<0?width-event.offsetX:width+event.offsetX));
Using the offsetX/offsetY works no matter what transform you use (at least in the many scenarios I've tested)
这篇关于从DOM接收转换鼠标事件数据与CSS 3D转换对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
