Fatal编程技术网
  • javascript/
  • Javascript 使用CSS 3D转换从DOM对象接收转换后的鼠标事件数据

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

javascript 3d css

Javascript 使用CSS 3D转换从DOM对象接收转换后的鼠标事件数据,javascript,javascript-events,3d,css,matrix-multiplication,Javascript,Javascript Events,3d,Css,Matrix Multiplication,javascript鼠标事件中当前是否有任何数据允许我轻松查找或计算鼠标相对于转换元素的3D空间的位置 为了直观地说明， 左边是没有3d矩阵的div，右边是3d转换后的div。 o是鼠标事件的起源 + /| / | +-----+ + | | | | | | o| => | o| | | | | +-----+ + |

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

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

                +
               /|
              / |
+-----+      +  |
|     |      |  |
|    o|  =>  | o|
|     |      |  |
+-----+      +  |
              \ |
               \|
                +
在下面的脚本中，单击div中的相同像素将报告文档/屏幕的2d转换空间中的
事件.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>


身体{
背景色：#FFF；
}
img{
位置：绝对位置；
}
#主要{
保证金：0；
-webkit透视图：1800；
}
#卡片{
位置：相对位置；
保证金：0自动；
宽度：420px；
身高：562px；
-webkit变换样式：保留-3d；
-webkit变换原点：中心；
}
#卡片，第页{
位置：绝对位置；
-webkit变换样式：保留-3d；
-webkit变换原点：左中心；
}
#卡片，页面，脸{
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit变换样式：扁平；
}
#卡片。页面。正面。正面{
z指数：1；
-webkit背面可见性：隐藏；
}
#卡片。页面。正面。背面{
-webkit变换：旋转（180度）translateX（-420px）；
}
函数rotate（）{
$（'.page'）.css（“-webkit transform”，“rotate3d（0，-1,0,60度）”）；
$（'.page'）.mousedown（函数（事件）{
console.log（event.layerX）；
});
}
$（文档）.ready（函数（）{
旋转（）；
});
您似乎在寻找
offsetX
属性
事件
。 可能您必须为每个.face创建侦听器才能识别事件，因为
offsetX
是基于触发事件的
目标计算的。
或者，您可能希望坐标从左侧的0开始到右侧的宽度*2，然后可以使用layerX和元素的原始宽度：


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



console.log(（event.layerXoffsetX和offsetY绝对是一个可行的解决方案。似乎你的图层示例可以沿一个轴旋转，但会随着更多轴旋转而崩溃。在前面和后面打了一些侦听器，奇怪的是，一个
-webkit backface visibility
设置为
hidden
的脸不会注册鼠标下降。是否有如何获得相同的offsetX数量，转换前，触摸事件？它似乎不存在。