javascript – 使用CSS 3D转换从DOM对象接收转换的鼠标事件数据

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

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

+
               /|
              / |
+-----+      +  |
|     |      |  |
|    o|  =>  | o|
|     |      |  |
+-----+      +  |
              \ |
               \|
                +

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

我知道,但是对于解析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,60deg)");
            $('.page').mousedown(function(event) {
                console.log(event.layerX);
            });
        }

        $(document).ready(function() {
            rotate();
        });

    </script>

</body>

</html>

解决方法

看起来你正在寻找offsetX属性事件.
也许你必须为每个.face创建监听器以识别事件,因为offsetX是根据触发事件的目标计算的.
或者您可能希望坐标从左侧的0开始到右侧的宽度* 2,然后您可以使用layerX和元素的原始宽度：

console.log((event.layerX<0?width-event.offsetX:width+event.offsetX));

无论你使用什么变换,使用offsetX / offsetY都是有效的(至少在我测试过的很多场景中)

原文链接：https://www.f2er.com/js/157182.html

javascript – 使用CSS 3D转换从DOM对象接收转换的鼠标事件数据

解决方法

猜你在找的JavaScript相关文章