小编Nol*_*sto的帖子

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

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

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

                +
               /|
              / |
+-----+      +  |
|     |      |  |
|    o|  =>  | o|
|     |      |  |
+-----+      +  |
              \ |
               \|
                +
Run Code Online (Sandbox Code Playgroud)

在下面的脚本中,单击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; …
Run Code Online (Sandbox Code Playgroud)

javascript 3d javascript-events css3 matrix-multiplication

7
推荐指数
1
解决办法
1859
查看次数