使用 CSS 3D 转换从 DOM 对象接收转换后的鼠标事件数据 [英] Receiving transformed mouse event data from DOM objects with a CSS 3D transform

查看：15
本文介绍了使用 CSS 3D 转换从 DOM 对象接收转换后的鼠标事件数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

javascript 鼠标事件中当前是否有任何数据可以让我轻松查找或计算相对于转换元素的 3D 空间的鼠标位置?

为了直观地说明，
左边是没有3d矩阵的div，右边是3d变换后的div.
o 是鼠标事件的起源

<代码> +/|/|+-----+ + ||||||○|=>|○|||||+-----+ + | ||+

在下面的脚本中，单击 div 中相同的像素将报告一个 event.layerX，它位于文档/屏幕的 2d 转换空间中.

我知道，但对解析 div 的 matrix3d 并使用它乘以事件位置以发现这一点的前景并不感到兴奋，但是在实际实现中，div 将具有更复杂的转换，这将需要对多个对象的每一帧都完成，我担心会带来开销......如果这是我唯一的选择，我当然不介意帮助它.

<html lang="zh-cn"><头><meta charset='utf-8'><title></title><style type="text/css" media="screen">身体 {背景颜色:#FFF；}图片{位置:绝对；}#主要的 {边距:0；-webkit-透视:1800；}#卡片 {位置:相对；边距:0 自动；宽度:420px；高度:562px；-webkit-transform-style: 保留-3d；-webkit-transform-origin:中心中心；}#card .page {位置:绝对；-webkit-transform-style: 保留-3d；-webkit-transform-origin:左中心；}#card .page .face {位置:绝对；宽度:100%；高度:100%；-webkit-transform-style: 平面；}#card .page .face.front {z-索引:1；-webkit-backface-visibility:隐藏；}#card .page .face.back {-webkit-transform:rotateY(180deg) translateX(-420px);}</风格><身体><div id='main'><div id='card'><div class='page draggable'><div class='face front'><img src='front.jpg'/>

<div class='face back'><img src='back.jpg'/>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script><脚本>函数旋转(){$('.page').css("-webkit-transform", "rotate3d(0, -1, 0, 60deg)");$('.page').mousedown(function(event) {控制台日志(事件.layerX)；});}$(document).ready(function() {旋转()；});

解决方案

您似乎在寻找 offsetX 属性 event.也许您必须为每个 .face 创建侦听器以识别事件，因为 offsetX 是根据触发事件的 target 计算的.或者，您可能希望坐标从左侧的 0 开始到右侧的 width*2，然后您可以使用 layerX 和元素的原始 width:

console.log((event.layerX<0?width-event.offsetX:width+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)

这篇关于使用 CSS 3D 转换从 DOM 对象接收转换后的鼠标事件数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆